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一 个 标准 的 网 页 由 结构 .表现 ,行为 三 部 分 组 成 。 它 对 应 的 标准 语言 分 别 是 结构 化 标准 
语言 .表现 标准 语言 和 行为 标准 语言 。JavaScript 主要 负责 页 面 中 元 素 的 行为 ,是 目前 运用 
最 广泛 的 行为 标准 语言 。 它 可 以 让 页 面 更 加 实用 、 友 好 ,并 且 丰 富 多 彩 。 

随 着 网 络 技术 的 不 断 进 步 以 及 AJAX 运用 的 不 断 拓展 ,其 核心 技术 JavaScript 越 来 越 
受到 人 们 的 关注 。JavaScript 不 仅 可 用 来 开发 交互 式 的 Web 页 面 ,还 可 将 HTML、XML 和 
Java Applet、Flash 等 Web 对 象 有 机 地 结合 起 来 ,快速 生成 Internet 上 使 用 的 分 布 式 应 用 程 
序 。 随 着 各 种 针对 JavaScript 的 框架 不 断 推出 ,jQuery 作为 JavaScript 框架 的 优秀 代表 ,可 
以 使 开发 者 轻松 实现 以 往 需 要 大 量 JavaScript 开发 才能 完成 的 功效 ,并 且 对 于 CSS、DOM、 
AJAX 等 各 种 标准 Web 技术 ,jQuery 都 提供 了 许多 实用 简便 的 方法 。 同 时 也 很 好 地 解决 了 
浏览 器 之 间 的 兼容 性 ,为 开发 者 省 去 了 很 多 繁琐 的 代码 编写 过 程 。 

本 书 具 有 以 下 特色 和 价值 。 

(1) 项 目 驱 动 ,案例 教学 ,采用 模块 化 进行 整合 ,面向 岗位 ,突出 技能 培养 。 

(2) 本 教材 在 教学 实施 中 ,要 求 运用 先进 的 教学 手段 。 

(3) 完善 学 生 的 知识 结构 ,培养 复合 型 人 才 ,提升 学生 就 业 竞 争 力 。 

(4) 打破 传统 学 科 体系 框架 ,提供 了 方便 老师 .学 生 能 够 便捷 查询 .浏览 案例 的 二 维 码 
资源 包 。 

本 书 二 维 码 资源 包 分 两 种 ,第 1 种 为 每 章 案例 的 源码 及 可 运行 网 页 ,可 通过 扫描 每 个 案 
例 的 二 维 码 打 开 ; 第 2 种 为 整 章 的 综合 案例 源码 及 可 运行 网 页 ,可 通过 扫描 该 章 “ 课 后 练习 ” 
前 的 二 维 码 打开 。 

“JavaScript 十 jQuery 动态 网 页 设计 与 制作 ”是 计算 机 应 用 专业 非常 重要 的 专业 核心 课 
程 ,也 是 IT 从 业者 所 必须 具备 的 关键 技能 。 本 书 融 入 了 JavaScript 十 jQuery 动态 网 页 设计 
与 制作 最 新 的 实践 教学 理念 ,力求 严谨 ,注重 与 时 俱 进 ,具有 知识 系统 、 案 例 丰 富 、 流 程 清晰 、 
实用 性 强 、 注 重 实践 技能 与 能 力 培养 的 特点 。 

本 书 作 为 应 用 型 大 学 计算 机 专业 的 特色 教材 ,坚持 科学 发 展 观 ,严格 按照 教育 部 关于 
“加 强 职业 教育 、 突 出 实践 能 力 培 养 ”的 教学 改革 精神 ,针对 该 课程 教学 的 特殊 要 求 和 职业 能 
力 培养 目标 , 既 注重 理论 知识 讲解 .又 突出 操作 技能 训练 ;这 将 有 助 于 学 生 尽快 掌握 应 知 应 
会 专业 技能 ,对 于 学 生 毕 业 后 顺利 走 上 社会 就 业 具有 特殊 意义 。 

本 教材 由 李 大 军 统筹 策划 并 具体 组 织 ; 李 妍 和 柴 俊 霞 为 主编 ; 李 妍 统 改 稿 ; 李 毅 .周波 为 
副 主编 ;由 曹 记 东 教授 审 订 。 作 者 编写 分 工 : 李 妍 编写 第 1 章 、 第 4 章 、 第 5 章 , 胡 晨 硕 编写 
第 2 章 、. 第 6 章 , 柴 俊 霞 编写 第 3 章 、 第 8 章 , 李 雪 编 写 第 7 章 、 第 11 章 , 周 波 编写 第 9 章 、 第 
10 章 ,高 虎 编写 第 12 章 , 关 忠 整理 案例 代码 , 华 燕 萍 对 文字 进行 修改 和 版 式 调整 , 李 晓 新 制 
作 教学 课件 。 



































在 教材 编写 过 程 中 ,参阅 了 大 量 国内 外 有 关 JavaScript 十 jQuery 动态 网 页 设计 与 制作 
的 最 新 书刊 .网 站 资料 , 精 选 具有 典型 意义 的 案例 ,并 得 到 计算 机 行业 协会 及 业界 专家 教授 
的 具体 指导 ,在 此 一 并 致谢 。 为 配合 教学 ,本 书 提供 了 配套 的 电子 课件 ,读者 可 以 从 清华 大 
学 出 版 社 网 站 (www. tup. com. cn) 免 费 下 载 使 用 。 因 作者 水 平 有 限 , 书 中 难免 存在 朴 漏 和 
不 足 , 县 请 同行 和 读者 批评 指正 。 
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第 1 章 


JavaScript 和 概述 


学 习 目 标 
了 解 JavaScript 的 概念 及 功能 。 
掌握 JavaScript 编辑 方法 。 


1.1 JavaScript 简介 


JavaScript 是 一 种 直译 式 脚本 语言 (脚本 语言 是 一 种 简单 的 程序 ,这 些 程序 由 一 些 
ASCII 字符 构成 ,可 以 使 用 任何 一 种 文本 编译 器 来 编写 ) ,以 网 页 为 基础 ,基于 对 象 和 事件 驱 
动 ,主要 对 网 页 进行 修饰 ,并 可 以 与 服务 器 端 程序 进行 通信 。 它 的 解释 器 被 称 为 JavaScript 
引擎 ,为 浏览 器 的 一 部 分 ,广泛 用 于 客户 端的 脚本 语言 。 常 用 来 为 网 页 添加 各 式 各 样 的 动态 
功能 ,为 用 户 提供 更 流畅 美观 的 浏览 效果 。 





1. JavaSeript 语言 简 史 


JavaScript 最 初 由 Netscape 的 Brendan Eich 设计 。JavaScript 是 甲骨 文公 司 的 注册 商 
标 。 发 展 初期 , JavaScript 的 标准 并 未 确定 ,同期 有 Netscape 的 JavaScript, 微软 的 JScript 
和 CEnvi 的 ScriptEase 三 足 易 立 。1997 年 ,在 ECMA( 欧 洲 计算 机 制造 商 协会 ) 的 协调 下 ， 
由 Netscape、Sun、 微 软 、Borland 组 成 的 工作 组 确定 统一 标准 : ECMA-262。 最 终 JavaScript 
的 正式 名 称 确定 为 “ECMA Script”, 由 ECMA 组 织 发 展 和 维护 。 





2. JavaScript 的 特点 


JavaScript 脚本 语言 具有 以 下 特点 。 

(1) 脚本 语言 。JavaScript 是 一 种 解释 型 的 脚本 语言 ,是 在 程序 的 运行 过 程 中 逐 行 进行 
解释 运行 的 。 

(2) 基于 对 象 和 事件 驱动 。JavaScript 是 一 种 基于 对 象 的 脚本 语言 , 它 不 仅 可 以 创建 对 
象 ,也 能 使 用 现 有 的 对 象 。 

(3) 简单 。JavaScript 语言 中 采用 的 是 弱 类 型 的 变量 类 型 ,对 使 用 的 数据 类 型 未 做 出 严 
格 的 要 求 ,是 基于 Java 基本 语句 和 控制 的 脚本 语言 ,其 设计 简单 紧凑 。 

(4) 动态 性 。JavaScript 是 一 种 采用 事件 驱动 的 脚本 语言 , 它 不 需要 经 过 Web 服务 器 
就 可 以 对 用 户 的 输入 做 出 响应 。 在 访问 一 个 网 页 时 ,鼠标 在 网 页 中 进行 单 击 或 上 下 移 、 窗 
移动 等 操作 ,JavaScript 都 可 直接 对 这 些 事件 给 出 相应 的 响应 。 

(5) 跨 平台 性 。JavaScript 脚本 语言 不 依赖 于 操作 系统 , 仅 需要 浏览 器 的 支持 。 因 此 ， 
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一 个 JavaScript 脚本 在 编写 后 可 以 带 到 任意 机 器 上 使 用 ,前 提 是 机 器 上 的 浏览 器 支持 
JavaScript 脚本 语言 ,目前 JavaScript 已 被 大 多 数 的 浏览 器 所 支持 。 


3. JavaScript 的 应 用 


JavaScript 虽然 是 一 种 脚本 语言 ,但 其 功能 十 分 强大 ,主要 有 以 下 几 种 应 用 。 

(1) 网 页 特效 : 使 用 JavaScript 可 以 创建 很 多 网 页 特效 ,如 鼠标 特效 ,键盘 特效 等 。 

(2) 表单 验证 : 使 用 JavaScript 可 以 方便 地 验证 用 户 输入 内 容 的 合法 性 ,并 给 予 提示 。 

(3) 网 页 互动 : 使 用 JavaScript 可 以 对 用 户 的 不 同事 件 产生 不 同 的 响应 。 

(4) 增加 安全 性 : 使 用 JavaScript 设置 验证 码 防止 恶意 注册 和 恶意 发 布 信息 。 

(5) 制作 游戏 : 使 用 JavaScript 可 以 制作 一 些小 游戏 以 及 大 型 游戏 。 

(6) 其 他 : 还 可 以 利用 Cookies 存储 用 户 信 息 ,减少 用 户 登 录 操 作 。 可 以 减少 编写 和 维 
护 代 码 工作 量 等 。 还 有 很 多 功能 等 待 用 户 自 己 探索 。 


1.2 ” JavaScript 的 编辑 工具 


JavaScript 是 嵌入 在 HTML 中 的 代码 段 , 因 此 只 要 是 能 编辑 HTML 的 编辑 器 都 可 以 
编辑 JavaScript。 


1. 纯 文本 编辑 器 


纯 文 本 编辑 器 是 最 简单 的 文本 编辑 器 ,例如 记事 本 。 一 般 纯 文本 的 编辑 器 都 需要 用 户 
手动 编写 相关 代码 ,这 需要 用 户 对 JavaScript 的 语法 和 对 象 等 使 用 比较 熟悉 ,适合 临时 打开 
查看 ,进行 简单 的 局 部 修改 。 

在 文本 编辑 工具 中 输入 JavaScript 代码 并 保存 ,然后 在 支持 JavaScript 运行 的 浏览 器 
上 打开 可 以 看 到 效果 。 

例 1-1 将 下 面 的 代码 输入 记事 本 中 并 保存 为 1-1. html。 

=html><head> 

<title 二 例 1-1 一 /title 二 

< 一 script language 一 "javascript" 二 

document. write(" 记 事 本 编辑 JavaScript!") 

=/script> 

<=/head> 

=body> 

这 是 一 个 JavaScript 示例 . 

=</body><=/html> 

JavaScript 是 一 种 解释 性 语言 ,也 就 是 说 ,其 代码 的 执行 不 需要 预先 进行 编译 ,直接 在 
浏览 器 中 运行 就 可 以 显示 ,其 显示 效果 如 图 1-1 所 示 。 

JavaScript 的 语句 书写 类 似 Java 或 C 语言 ,语法 规则 也 很 相似 ,通常 要 在 每 行 语句 的 结 
尾 处 加 上 一 个 分 号 ,但 根据 JavaScript 标准 分 号 是 可 选 的 ,浏览 器 也 可 以 把 行 末 作 为 语句 的 
结尾 ,但 需要 注意 ,如 果 在 一 行 上 写 下 多 条 语句 ,每 条 语句 的 结尾 处 必须 使 用 分 号 。 
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> CG |Q 1-Lhtml 





记事 本 编辑 JavaScript ! 这 县 一 个 JavaScript 示 例 。 





图 1-1 在 浏览 器 中 运行 的 效果 


2. Adobe Dreamweaver 


Adobe Dreamweaver, 简 称 *“DW”, 中 文 名 称 为 “梦想 编织 者 ”, 是 美国 Macromedia 公司 
开发 的 集 网 页 制作 和 网 站 管理 于 一 身 的 所 见 即 所 得 网 页 编辑 器 ,DW 是 第 一 套 针 对 专业 网 
页 设计 师 特别 发 展 的 视觉 化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 
跨越 浏览 器 限制 的 充满 动感 的 网 页 。 在 手动 编辑 JavaScript 方面 ,DW 提供 代码 提示 ,方便 
用 户 进行 代码 编辑 工作 。 

例 1-2 启动 DW ,在 代码 视图 中 将 下 面 的 代码 输入 并 保存 为 1-2. html。 


<html> 

<head> 

meta http-equiv= "Content-Type" content= "text/html; charset= utf-8" /> 

过 title> 例 1-2< /title> 

=</head> 

=body> 

一 script language= "javascript"> 
alert(" 提 示 信 息 !1"); 

</script> 

=</body> 

=/html> 


编辑 状态 和 显示 效果 如 图 1-2(a) 和 图 1-2(b) 所 示 。 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 例 1-2</title> 
</head> 
<body> 
<script language="javascript"> 
alert ("提示 信息 ! "); 
EN </script> 


























(a) 编辑 状态 (b) 显示 效果 
图 1-2 编辑 状态 和 显示 效果 


-人 0 


3. 其 他 常用 编辑 工具 


目前 使 用 比较 多 的 JavaScript 编辑 工具 还 有 Sublime Text 和 WebStorm。 

Sublime Text 是 一 个 代码 编辑 器 ,由 程序 员 Jon Skinner 于 2008 年 1 月 开发 出 来 , 它 最 
初 被 设计 为 一 个 具有 丰富 扩展 功能 的 Vim。Sublime Text 具有 漂亮 的 用 户 界 面 和 强大 的 
功能 ,例如 代码 缩 略 图 .Python 的 插件 、 代 码 段 等 。 还 可 自 定义 键 绑 定 、 菜 单 和 工具 栏 。 
Sublime Text 的 主要 功能 包括 拼写 检查 ,书签 ,完整 的 Python API,Goto 功能 ,即时 项 目 切 
换 , 多 选择 ,多 窗口 等 。Sublime Text 是 一 个 跨 平 台 的 编辑 器 ,同时 支持 Windows、Linux、 
Mac OS X 等 操作 系统 。 

WebStorm 是 JetBrains 公司 旗下 一 款 JavaScript 开发 工具 。 被 广大 中 国 JavaScript 开 
发 者 誉 为 “Web 前端 开发 神器 ”最 强大 的 HTML5 编辑 器 “最 智能 的 JavaScript IDE? 等 。 
与 Intellij IDEA 同 源 ,继承 了 Intellij IDEA 强大 的 JavaScript 部 分 的 功能 。 

其 他 编辑 工具 还 有 Spket、Ixedit、.Komodo Edit、EpicEditor, 用 户 可 以 尝试 使 用 。 


1.3 ” JavaScript 的 伐 入 


在 HTML 文件 中 有 3 种 方式 加 载 JavaScript, 这 些 方式 与 HTML 中 加 载 CSS 很 相似 ， 
分 为 内 部 引用 JavaScript, 外 部 引用 JavaScript 文件 ,内 联 引用 JavaScript。 


1. 内 部 引用 JavaScript 


内 部 引用 JavaScript 是 通过 script 标签 加 载 JavaScript 代码 。 要 将 JavaScript 的 代码 
放 在 HTML 标签 符 志 script 盖 和 所 /script 盖 之 间 。 志 script 二 标签 符 中 有 多 个 参数 ,如 果 包 
含 的 是 JavaScript 代码 ,其 language 选项 的 值 要 设置 为 "javascript”。 

除 此 之 外 ,也 可 以 设置 为 “javascriptl.1” 加 


《script language=1| 








“javascript1. 2” 或 “jscript” 等 值 ,其 含义 也 都 表示 /head> at 
支持 JavaSeript 脚本 语言 。 在 Dreamweaver 中 的 | Spa 和 YaSSEHDt 
iavascrintl' 3 | 纪 
代码 编辑 环境 里 ,可 以 看 到 language 选项 的 可 选 </html> : iavascript 
值 , 其 中 以 j 开头 的 都 是 支持 JavaScript 脚本 的 选 本 
| 





项 ,如 图 1-3 所 示 。 
一 script 二 标签 符 可 以 放置 在 一 head 二 和 图 1-3 Dreamweaver 的 代码 编辑 环境 里 

去 /head> 之 间 , 如 例 1-1 程序 所 示 。 到 script 二 标 language 选项 的 可 选 值 

签 符 还 可 以 放置 在 二 body 二 和 二 /body 二 之 间 ,如 

例 1-2 程序 所 示 。 


2. 外 部 引用 JavaScript 文件 


外 部 引用 就 是 引用 HTML 文件 外 部 的 JavaScript 文件 ,这 种 方式 可 以 使 代码 更 清晰 ， 
更 容易 扩展 。 在 HTML 的 script 标签 加 载 外 部 JavaScript 文件 。 


例 1-3 启动 编辑 软件 ,将 下 面 的 代码 输入 并 保存 为 testjs. js。 


/= 第 一 个 JavaScript 文件 * / 
document. write(" 外 部 JavaScript 文件 ") ; 


将 下 面 的 代码 输入 并 保存 为 1-3. html。 


=html> 

=head> 

meta http-equiv= "Content-Type" content= "text/html; charset= utf{-8" /> 

二 title 二 外 部 引用 JavaScript 文件 二 /title 二 

=/head> 

=body> 

引用 外 部 JavaScript 文件 : 二 font color 二 "#FF0000" 记 过 script language 二 "javascript" src 一 "testjs. 
js"><=</script> </font> 

<=/body> 

=/html> 


显示 效果 如 图 1-4 所 示 。 





J 口外 部 引用 JavaScript 文 件 。 x 
《 >Rmo5 交 Q1-3html 
引用 外 部 JavaScript 文 件 ， 此 处 为 外 部 JavaScript 文 件 





图 1-4 外 部 引用 JavaScript 文件 


< 一 script language 二 "javascript" src 二 "testjs. js" 祖 过/script 记 的 代码 也 可 以 放 到 head 


标签 内 。 浏 览 器 加 载 顺 序 是 从 上 到 下 , 放 在 head 标签 中 时 ,会 在 页 面 加 载 之 前 将 其 加 载 到 
浏览 器 里 , 放 在 body 标签 中 时 ,会 在 页 面 加 载 完成 之 后 读 取 。 


机 


3. 内 联 引用 JavaScript 


内 联 引用 是 通过 HTML 标签 中 的 事件 属性 实现 的 ,可 表示 为 事件 调用 JavaScript 程 
例如 通过 单 击 事件 调用 JavaScript。 
例 1-4 将 下 面 的 代码 输入 并 保存 为 1-4. html。 


=html> 

二 head 一 

一 meta http-equiv= "Content-Type" content= "text/html; charset=utf{-8" /> 
二 title 记 内 联 引 用 JavaScript 二 /title 二 

</head> 

=body> 

< 一 input type 一 "button" value 一 " 单 击 调用 JavaScript" onclick 王 "alert(' 你 单 击 了 一 个 按钮 7 ; "二 
</body> 

=/html> 


显示 效果 如 图 1-5 所 示 。 
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口 mESI 用 Javascript Cx No 
《< >》 由 DO 安 A 1-4html 


单 击 调用 JavaScript 








图 1-5 内 联 引 用 JavaScript 


1.4 上 机 练习 


例 1-5 编写 JavaScript 文件 ,实现 显示 6X5 表格 的 功能 。 在 HTML 网 
页 中 引入 该 JavaScript 文件 ,实现 单 击 按钮 ,显示 表格 的 功能 。 

(1) 编写 JavaScript 文件 。 在 编辑 工具 中 新 建 一 个 空白 文档 ,并 输入 下 
面 的 JavaScript 代码 ,然后 保存 为 table. js。 

// 显 示 表 格 


function tbl() 





var ij 
document. write "一 table border=1 align= center width=85%>"); 
for(i=1; i<=6; it+){ 
if{Ci%2)1{ 
document. write("<tr bgcolor= #¢cccccc>"); 
} 
elsel 
document. write("<tr bgcolor= # eeeeee>"); 
} 
for(j 王 1; j<=5; j++){ 
document. write(" 过 td 二 第 " 十 i 十 " 行 ,第 " 十 j 十 " 列 一 /td>") 
} 
document. write("</tr>"); 


} 
document. write("</table>"); 


(2) 在 编辑 工具 中 输入 下 面 的 代码 ,并 保存 为 网 页 文件 1-5. html。 


=html> 

二 head 一 

一 meta http-equiv= "Content-Type" content= "text/html; charset=utf{-8" /> 
二 title 一 显示 表格 过 /title 二 

script language= "javascript" src= "table.js"></script> 

</head> 
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body> 


一 input type 二 "button" value 二 "显示 表格 " onClick 二 "tbl() "二 
=/body> 
=/html> 


(3) 编写 完成 后 ,在 浏览 器 中 打开 网 页 文件 ,显示 效果 如 图 1-6 所 示 。 








口 归属 
《>m5 交 QL5html 








(a) 按钮 





(b) 表格 
图 1-6 显示 效果 


课 后 练习 


1. 利用 3 种 加 载 JavaScript 的 方式 ,弹出 提示 对 话 框 * 调 用 内 部 js 和 外 部 js 的 练习 ”。 
2. 利用 3 种 加 载 JavaScript 的 方式 ,显示 “欢迎 进入 JavaScript 的 学 习 ”。 


第 2 章 


JavaScript 基础 


学 习 目 标 
掌握 JavaScript 的 语法 规则 。 
熟练 掌握 JavaScript 的 编程 方法 。 


2.1 JavaScript 的 语法 规则 


Java 是 面向 对 象 的 语言 ,是 一 种 基于 对 象 (object based) 和 事件 驱动 (event driver) 的 编 
程 语 言 。 因 而 它 本 身 提 供 了 非常 丰富 的 内 部 对 象 供 设 计 人 员 使 用 。 如 果 用 户 之 前 已 经 有 了 
Java 或 C 等 高 级 语言 的 编程 基础 ,那么 可 以 迅速 掌握 JavaScript 的 编程 方法 。 


1. 标识 符 


标识 符 是 指 JavaScript 中 定义 的 符号 名 称 , 例 如 ,变量 名 、 函 数 名 、 数 组 名 等 。 

标识 符 可 以 任意 取 名 ,但 必须 遵循 以 下 命名 规则 。 

(1) 第 一 个 字符 必须 是 字母 .下 画 线 或 美元 符号 。 其 他 字符 可 以 是 字母 .下 画 线 、 美 元 
符号 或 数字 。 

(2) 字符 中 的 字母 可 以 包括 拓展 的 ASCII 或 Unicode 字母 字符 ,也 可 以 使 用 中 文 。 

(3) 不 能 使 用 关键 字 、 保 留 字 ,true false 和 null。 

(4) 标识 符 名 称 对 大 小 写 敏 感 , 即 大 写 的 变量 A 和 小 写 的 变量 a 是 两 个 不 同 的 标 
识 符 。 

JavaScript 的 关键 字 如 表 2-1 所 示 。 

表 2-1 JavaScript 的 关键 字 

















break delete function return typeof 
case do 证 switch var 
catch else in this void 
continue false instanceof throw while 
debugger finally new true with 
default for null try 














JavaScript 还 为 将 来 的 扩展 提前 预 留 了 一 些 保留 字 , 如 表 2-2 所 示 。 
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表 2-2 ， JavaScript 扩展 的 保留 字 

















abstract double goto native static 
boolean enum implements package super 

byte export import private synchronized 
char extends int protected throws 

class final interface public transient 
const float long short volatile 














除 此 之 外 ,有 些 对 象 或 系统 函数 的 名 字 最 好 也 避免 使 用 ,以 免 出 现 问 题 ,比如 String 或 


parseInt 等 。 
2. 变量 


在 任何 一 种 编程 语言 中 都 需要 存储 数据 ,这 些 数据 一 般 都 存储 在 变量 中 。 变 量 顾 名 思 
义 就 是 可 以 变化 的 量 , 其 中 的 内 容 在 程序 的 运行 过 程 中 是 可 以 发 生变 化 的 ,因此 变量 一 般 是 
作为 运行 的 中 间 过 程 或 结果 来 存储 数据 的 。 比 如 ,循环 中 的 计数 值 就 要 存储 在 一 个 变量 中 ; 
存储 用 户 接 收 的 输入 值 ,也 要 使 用 变量 。 

JavaScript 中 的 变量 没有 类 型 ,使 用 时 可 以 先 声 明 再 赋值 ,例如 : 


var inum; 
inum 一 1234; 


变量 可 以 重复 赋值 ,例如 : 


Var Sas 
S_a 一 "字符 囊 类 型 数据 "; 


S_a= "Hello, JavaScript"; 
也 可 以 通过 赋值 来 指定 变量 的 类 型 ,例如 : 


fa=3.14; 
人 _b 一 12.66; 
f_sum 一 fa 十 f_b; 


document. write({f_sum) 


3. 注释 


为 了 增强 JavaScript 程序 的 可 读 性 ,一般 都 会 在 源 代码 中 增加 注释 内 容 , 这 些 内 容 不 是 
JavaScript 程序 的 可 执行 语句 ,只 是 起 到 解释 和 说 明 的 作用 。 另 外 ,在 调试 JavaScript 程序 
时 也 会 使 用 到 注释 ,在 暂 不 需要 执行 的 语句 前 增加 注释 ,以 达到 调试 的 目的 。 

JavaScript 程序 的 注释 形式 有 两 种 ,一 种 是 单行 注释 ; 另 一 种 是 多 行 注释 。 

单行 注释 只 对 一 行内 容 进行 注释 ,使 用 “//” 开 头 的 行 即 为 注释 行 。 

多 行 注释 可 以 对 多 行进 行 注释 ,以 “/ x* ”开始 ,以 “ x /结束 ,注意 ,多 行 注释 符 是 不 能 和 内 
套 使 用 的 。 

例 2-1 打开 编辑 软件 ,输入 下 面 的 代码 ,代码 中 增加 了 注释 行 ,但 运行 时 只 执行 没有 
注释 行 的 语句 。 


-- 儒 加 -TavascriptrjQuery Web 交 互 程序 设计 一 


=html>=head> 
二 title 二 例 2-1 一 /title 二 
=script language= "javascript"> 
document. write "这 行 不 是 注释 一 p 二 ") 
// 下 面 一 行 的 语句 的 开头 增加 了 注释 符 
//document. write(" 这 行 是 注释 一 p 之 "); 
document. write "这 行 也 不 是 注释 一 p 二 ") 
/* 本 段 为 多 行 注释 
alert(" 无 法 显示 的 弹出 对 话 框 !") 
document. write(" 这 句 也 不 能 显示 二 p 记 "); */ 
document. write(" 这 行 可 以 显示 了 "); 
< /script><=/head> 
=body> 
二 p 二 这 是 一 个 有 注释 的 JavaScript 例子 . 
=/body>=/html> 


显示 效果 如 图 2-1 所 示 。 

















这 是 一 个 有 注释 的 JjavaScript 例 子 。 





图 2-1 显示 效果 
需要 注意 的 是 ,注释 语句 不 要 过 多 ,和 否则 会 影响 JavaScript 程序 的 加 载 和 运行 。 
2.2 数据 类 型 
JavaScript 的 数据 类 型 有 字符 串 (String)、 数 值 C(Number)、 布 尔 (Boolean)、 数 组 


(Array) 对象 (Object)` 空 (Null) .未 定义 (Undefined) 。 
JavaScript 拥有 动态 类 型 。 这 意味 着 相同 的 变量 可 用 作 不 同 的 类 型 ,例如 ， 


Var x //x 为 未 定义 类 型 
var x 一 2.3; /x 为 数字 类 型 
var x= "JavaScript"; /x 为 字符 串 类 型 
1. 数值 型 

JavaScript 数值 型 表示 一 个 数字 ,比如 2、 一 5、.5e2。 
数值 型 包括 正 数 、 负 数 .例如 : 


var xl=10; 
var 22 三 一 105 
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或 者 整数 和 小 数 , 例 如 : 

var xl 一 3.14; 

var x2 一 314; 

极 大 或 极 小 的 数字 可 以 通过 科学 (指数 ) 计 数 法 来 书写 ,例如 : 

var y= 123e5; // 等 同 于 123 * 10 x 10 * 10 * 10 * 10 一 之 12300000 

var z 一 123e-5; // 等 同 于 123*0.1x*0.1x*0.1x*0.1x0.1 一 之 0.00123 


2. 字符 串 型 


字符 串 型 可 以 表示 一 串 字 符 ,字符 串 变量 可 以 用 来 存储 字符 ,比如 "JavaScript"' 梦 想 中 
国 '。 字 符 串 型 应 使 用 双 引 号 (") 或 单 引号 () 括 起 来 。 
JavaScript 字符 串 定义 方法 如 下 : 


var str 一 "字符 串 "; 直方 法 一 
var str 一 new string(" 字 符 串 ") ; /方法 二 
通常 使 用 方法 一 ,比较 简单 。 

3. 布尔 型 


布尔 (逻辑 ) 型 只 能 有 两 个 值 : true 或 false。 布 尔 型 常用 在 条 件 测试 中 , 它 用 于 判断 表 
达 式 的 逻辑 条 件 。 每 个 关系 表达 式 都 会 返回 一 个 布尔 值 。 例 如 


x 一 一 3 /* 判断 x 是 否 等 于 3, 如 果 等 于 ,表达 式 为 true, 否则 ,表达 式 为 falsex / 

4. 未 定义 值 和 空 值 型 

未 定义 值 表示 变量 不 含有 值 。 以 下 3 种 情况 返回 类 型 为 未 定义 值 Undefined。 

(1) 当 变 量 未 初始 化 时 。 

(2) 变量 未 定义 时 。 

(3) 函数 无 明确 返回 值 时 (函数 没有 返回 值 时 返回 的 都 是 Undefined) 。 

Undefined 并 不 等 同 于 未 定义 的 值 ,Undefined 是 声明 了 但 是 没有 初始 化 的 该 变量 。 

空 值 Null 表示 尚未 存在 的 对 象 ,Null 是 用 来 准备 保存 对 象 , 还 没有 真正 保存 对 象 的 值 。 
从 人 逻辑 角度 看 , Null 值 表示 一 个 空 对 象 指针 。 实 际 上 ,Undefined 值 是 派生 自 Null 值 的 。 

注意 ,任何 时 候 都 不 建议 显 式 地 设置 一 个 变量 为 Undefined, 但 是 如 果 保 存 对 象 的 变量 
还 没有 真正 保存 对 象 ,应 该 设置 成 Null。 


2.3 运算 符 和 表达 式 


在 定义 完 变 量 后 ,就 可 以 对 它们 进行 赋值 改变、 计算 等 一 系列 操作 ,这 一 过 程 通常 又 用 
表达 式 来 完成 ,可 以 说 它 是 变量 .常量 ,布尔 及 运算 符 的 集合 ,因此 表达 式 可 以 分 为 算术 表述 
式 、 字 符 串 表达 式 .赋值 表达 式 以 及 布尔 表达 式 等 。 

运算 符 是 完成 操作 的 一 系列 符号 ,在 JavaScript 中 有 算术 运算 符 , 如 十 一.* /等 ;有 比较 
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运算 符 , 如 ! 


二 一 一 等 ;有 逻辑 运算 符 , 如 ! ( 取 反 )、|、| | ;有 字符 串 运 算 符 ,如 十 .十 一 等 。 
1. 算术 运算 符 
算术 运算 符 用 于 执行 变量 或 值 之 间 的 算术 运算 ,主要 完成 加 、 减 、 乘 、 除 等 运算 。 算 术 运 























算 符 如 表 2-3 所 示 。 
表 2-3 算术 运算 符 
运算 符 描 述 例 子 结 果 
十 加 x 一 y 十 2 x=7 
一 减 X 一 y 一 2 x=3 
x 乘 X 一 yx2 x=10 
/ 除 x=y/2 x 一 2.5 
% 求 余数 (保留 整 数 ) x=y%2 x=1 
让 而 累加 # 三 十 十 x=6 
ep 累 减 X 一 一 一 y X 一 4 





2. 赋值 运算 符 
赋值 运算 符 用 于 给 JavaScript 变量 赋值 ,如 表 2-4 所 示 。 


















































表 2-4 赋值 运算 符 
运算 符 例 子 等 价 于 
= x=y 
十 三 x 十 一 y x 一 x 十 y 
一 一 x 一 一 y X 一 X 一 y 
x 一 xx =y x=xx*y 
= x/=y x=x/y 
%= x%=y x=x%y 
3. 关系 运算 符 
关系 运算 符 又 称 比 较 运 算 符 ,用 在 逻辑 语句 中 ,以 测定 变量 或 值 是 否 相 等 ,如 表 2-5 
所 示 。 
表 2-5 关系 运算 符 
运算 符 描 述 例子 结 果 
二 二 等 于 a 一 一 b 如 果 a 和 bb 的 值 相同 则 返回 true( 真 ) ,否则 返回 false( 假 ) 
! = 不 等 于 al =b 如 果 a 和 bb 的 值 不 相同 则 返回 true( 真 ) ,否则 返回 false( 假 ) 
2 盐 于 a 二 b a 大 于 b 则 返回 true( 真 ) ,否则 返回 false( 假 ) 
>= 大 于 等 于 a 请 二 b | a 大 于 等 于 b 则 返回 true( 真 ) ,否则 返回 false( 假 ) 
< 小 于 a=b a 小 于 b 则 返回 true( 真 ) ,否则 返回 false( 假 ) 
去 一 小 于 等 于 a 三 一 b | a 小 于 等 于 b 则 返回 true( 真 ) ,否则 返回 false( 假 ) 
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4. 逻辑 运算 符 


逻辑 运算 符 一 般 用 于 语句 的 判断 ,测定 变量 或 值 之 间 的 逻辑 ,返回 逻辑 类 型 的 值 , 如 
表 2-6 所 示 。 
表 2-6 逻辑 运算 符 
运算 符 | 描述 | 例子 结 果 
&& 与 | a&&b | 只 有 当 a 和 bb 同 为 true( 真 ) 时 , 才 返回 true( 真 )。 否则 ,返回 false( 假 ) 


1 或 lb 如 果 其 中 一 个 表达 式 为 true( 真 ) ,或 两 个 表达 式 同 为 真 , 则 返回 true( 真 )。 否 
| 则 ,返回 false( 假 ) 











如 果 表 达 式 a 为 true( 真 ) , 则 返回 false( 假 )。 如 果 为 false( 假 ), 则 返回 true 
( 真 ) 











5. 字符 串 运 算 符 


字符 串 运算 符 只 有 一 个 , 即 加 号 (“十 ”) ,其 用 于 把 文本 值 或 字符 串 变 量 前 后 连接 
起 来 。 如 果 是 其 他 类 型 的 值 与 字符 串 类 型 的 值 使 用 加 号 连接 在 一 起 , 则 结果 是 字符 串 
类 型 。 


2.4 上 机 练习 


1. 变量 的 定义 和 显示 
例 2-2 打开 编辑 软件 ,输入 下 面 的 代码 ,保存 为 2-2. html。 


=html> 
=head> 
meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
二 title 志 定义 数据 过/title 二 
=</head> 
=body> 
= script language= "javascript"> 
var s 一 "定义 不 同 数据 类 型 的 变量 !; 
var X 一 10; 
var y=95.63; 
var z=3.15647; 
document. write("s= "十 s+"<br>"); 








document. write("x 
document. write("y= "二 y+"<br>") 
document. write("z 一 "十 z 十 "<<br>"); 

=/script> 

=/body> 

=/html> 


显示 效果 如 图 2-2 所 示 。 
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< > QD 22html 
-定义 不 同 数据 类 型 的 变量 ! 


x=10 
y=95. 63 
2=3.15647 





图 2-2 显示 效果 


2. 算术 运算 符 的 使 用 
例 2-3 打开 编辑 软件 ,输入 下 面 的 代码 ,保存 为 2-3. html。 


=html> 

=head> 

meta http-equiv= "Content-Type" content= "text/html; charset= utf{-8" /> 
二 title 二 算术 运算 符 达 /title 二 

=/head> 

=body> 

=script language= "javascript"> 





var n=567, x,y,2,s; 
x=n/10%2; 
y= (n-n%10)/100; 
z=n%10; 
s=n%100/10; 
document. write("n 一 "十 n 十 "一 br 一 "); 
document. write("x 一 "十 x 十 "一 br 一 "); 
document. write("y= "十 y+ "<br>"); 
document. write("z 一 "十 z 十 "一 br 之 "); 
document. write("s= "十 s 二 "<=br>"); 
=/script> 
</body> 
=/html> 


显示 效果 如 图 2-3 所 示 。 





> 国立 32-3html 


rE? 


xY=0.7000000000000023 





图 2-3 显示 效果 


3. 关系 运算 符 的 使 用 
例 2-4 打开 编辑 软件 ,输入 下 面 的 代码 ,保存 为 2-4. html。 





=html> 
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一 head 一 
一 meta http-equiv= "Content-Type" content= "text/html; charset 一 utf-8" /> 
<<title> 关 系 运 算 符 二 /title> 
=/head> 
=body> 
< 一 script language= "javascript"> 
var n 一 3,m 一 4; 
var ayb,c,di; 
a=n<m; 
b=((1+m)==m); 
c=((n1+)>m); 
d 一 ((--m)! 一 n); 
document. write("n 一 "十 n 十 ",m 一 "十 m 十 "一 br 一 "); 
document. write("a 一 "十 a 十 "一 br 一 "); 
document. write("b 一 "十 b 十 "二 br 一 ") 
document. write("c 一 "十 c 十 "一 br 一 "); 
document. write("d 一 "十 d 十 "一 br 二 ") 
/script> </body> 
=/html> 


显示 效果 如 图 2-4 所 示 。 

















《 > 2-4html 


5, m3 
artrue 


b=true 
|| -=false 
中 true 





图 2-4 显示 效果 


4. 邮 辑 运算 符 的 使 用 
例 2-5 打开 编辑 软件 ,输入 下 面 的 代码 ,保存 为 2-5. html。 


=html> 

=head> 

一 meta http-equiv= "Content-Type" content= "text/html; charset= ut{-8" /> 
一 title 一 逻辑 运算 符 </title 二 

<=/head> 

=body> 

=script language= "JavaScript"> 





var x=6,y=8; 
var b; 
b= EE C++x 一 一 一 y); 


document. write( "x 






="+y+"<br>"); 
"br>"); 














document. write( "b= 
/script> =</body> 
</html> 
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显示 效果 如 图 2-5 所 示 。 


> D2-5html 


=6, y=8 
b=false 





图 2-5 显示 效果 


2.5 流程 控制 


同 其 他 的 高 级 程序 语言 一 样 ,JavaScript 提供 了 3 种 程序 结构 ,分 别 是 顺序 结构 、 分 支 
结构 和 循环 结构 。 

顺序 结构 最 简单 ,其 执行 方法 是 从 上 到 下 ,中 间 没 有 其 他 的 分 支线 路 。 按 设计 时 所 确定 
的 次 序 ,一 个 一 个 语句 地 顺序 执行 。 以 下 分 别 介绍 选择 结构 和 循环 结构 。 


2.5.1 选择 结构 


选择 结构 就 是 在 程序 的 执行 过 程 中 ,通过 逻辑 判断 ,在 多 条 备 选 执行 线路 中 ,选择 出 一 
条 来 执行 。JavaScript 中 的 分 支 语句 主要 有 以 下 几 种 。 

(1) 话语 句 

放 语 句 的 语法 格式 如 下 : 


if (条件) 
条 件 成 立时 执行 的 代码 


其 中 “条 件 ” 是 一 个 逻辑 表达 式 , 当 值 为 真 时 ,就 执行 花 括 号 对 (*{” 和 *)”) 中 的 代码 。 
例 2-6 下 面 所 示 代码 用 于 判断 用 户 是 否 输入 了 用 户 名 和 密码 。 






=html> mn 
=head> 加 
meta http-equiv= "Content-Type" content= "text/html; charset=utf{-8" /> | 

二 title 志 例 2-6 一 /title 字 一 script language 二 "javascript"> 扫 一 扫 


function check() 
if(document. forml. username. value= =""){ 
alert "请 输入 用 户 名 !"); 
return false; 
} 
if(document. forml1. password. value 一 一 "")!{ 
alert "请 输入 密码 !"); 


return false; 
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return true; 


</script><=/head> 
Ee 
=form id= "forml" name= "forml" method= "post" action=""> 
一 p align= "center"> &nbsp; &nbsp;=/Pp> 
一 p align 二 "center" 记 用 户 名 : 二 input type 一 "text" name 一 "username" id 一 "username" /二 一 /p 盖 
一 p align 一 "center" 二 密 & nbsp;&nbsp 码 : 
一 input type= "text" name 一 "password"” id 一 "password" /></p> 
<p align= "center"> 
一 input type= "submit" name 一 "button" id 一 "button" value==" 提 交 " onclick 二 "return check();"/ 放 
Bnbsp; &nbsp; &-nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
< 一 input type 一 "reset" name 一 "button2"” id 一 "button2"” value 一 " 重 置 " /二 一 /p> 
=/form> 
=/body> 
=/html> 


这 段 代码 在 用 户 登录 或 注册 等 界面 中 经 常 被 使 用 ,通过 JavaScript 代码 的 判断 ,可 以 
在 页 面 被 提交 给 服务 器 前 就 进行 最 基本 的 内 容 判 断 , 这 样 就 节省 了 网 络 带 宽 和 等 待 的 
时 间 。 

本 示例 中 的 JavaScript 代码 是 放 在 check() 函 数 中 的 ,由 “提交 ”按钮 中 的 onclick( 单 
击 ) 事 件 执行 , 即 当 用 户 单 击 “ 提 交 ” 按 钮 时 执行 check() 函 数 。 由 于 check() 函 数 根 据 判断 
会 返回 不 同 的 值 ( 真 值 *true” 表 示 继 续 提交 , 假 值 *false” 表 示 停 止 提交 ), 这 时 的 onclick 事 
件 也 会 执行 对 应 的 操作 ,因此 onclick 事件 的 
值 要 写 为 “return check();”。 

在 check() 函 数 中 首先 判断 页 面 中 的 “用 
户 名 "文本 框 中 的 值 是 否 为 空 , 即 等 于 空 ,“ 用 
户 名 ”文本 框 使 用 页 面 对 象 document 下 的 属 
性 值 , 即 “document. forml. username. value”， 
如 果 等 于 空 值 , 则 使 用 alert() 函 数 弹出 一 个 | 于 和 用 记名! 
提示 对 话 框 ,并 返回 false 值 。 密 码 框 的 判断 
也 是 相同 的 。 本 代码 的 执行 效果 如 图 2-6 
所 示 。 

(2) if...else 语句 

f...else 语句 的 语法 格式 如 下 : 


让 (条件) 
条 件 成 立时 执行 此 代码 





局 JavaScript 提醒 























图 2-6 让 语句 的 执行 效果 图 


else{ 


条 件 不 成 立时 执行 此 代码 


让 .else 语句 要 比 过 语句 多 出 一 个 可 选 分 支 , 在 计 语 句 中 ,如 果 站 后 面 的 判断 条 件 为 
假 , 则 直接 执行 if 语句 段 后 面 的 内 容 , 而 if...else 语句 则 当 if 后 面 的 判断 条 件 为 假 时 , 转 而 
执行 else 中 的 语句 内 容 。 
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例 2-7 下 面 所 示 代码 的 功能 是 判断 用 户 是 否 勾 选 了 复 选 框 。 


=html> 

=head> 

一 meta http-equiv= "Content-Type" content= "text/html; charset= ut{-8" /> 
二 title 二 例 2-7 一 /title 二 

=script language= "javascript"> 





function check(){ 
if(document. forml .enjoy.checked) { 
alert(" 你 喜欢 JavaScript! :)"); 
} 
else { 
alert(" 你 不 喜欢 JavaScript! :("); 
} 
} 
</script><=/head> 
=body> 
=form id= "forml" name= "forml" method= "post" action=""> 
一 p 二 你 喜欢 学 习 JavaScript 吗 ? 一 input type 二 "checkbox" name 二 "enjoy" id 二 "enjoy" /二 
</p> 
=p><input type= "button" name 二 "button”" id 一 "button” value 一 "提交 "onclick 一 "check()"/ 二 
</p> 
=/form><=/body> 
=/html> 


本 代码 也 是 使 用 onclick 事件 驱动 执行 check() 函 数 中 的 JavaScript 代码 。 代 码 中 使 用 
了 让...else 语句 ,在 if 语 句 后 面 判 断 复 选 框 是 否 被 勾 选 , 即 通过 判断 document 对 象 下 的 
forml 表单 中 的 enjoy 复 选 框 的 checked 属性 (document. forml. enjoy. checked) 的 值 是 否 
为 真 ,来 确定 用 户 是 否 选 了 这 个 复 选 框 。 如 果 条 件 为 真 , 则 执行 ff 后 花 括号 中 的 语句 ;如 果 
条 件 为 假 , 则 执行 else 后 花 括 号 中 的 语句 。 本 代码 的 执行 效果 如 图 2-7 所 示 。 


你 喜欢 学 习 JavaScript 吗 ? 





压 Javascript 提醒 





你 喜欢 JavaScript! :) 








图 2-7 让 ..else 语句 的 执行 效果 图 











(3) if...else if...else 语句 
让 ...else if...else 语句 的 语法 格式 如 下 : 


这 (条 件 D1{ 

条 件 1 成 立时 执行 代码 
else if (条 件 2){ 

条 件 2 成 立时 执行 代码 
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else{ 
条 件 1、 条 件 2 和 条 件 n 均 不 成 立时 执行 代码 
} 


if...else if...else 语句 比 让 语句 和 让..else 语句 要 多 出 几 个 条 件 判断 ,同时 也 多 出 了 几 
个 备 选 执行 线路 ,因此 本 语句 也 可 以 称 为 多 分 支 条 件 语句 。 

在 多 个 条 件 中 , 当 第 一 个 条 件 不 满足 时 ,会 判断 第 二 个 条 件 ,如 果 第 二 个 条 件 也 不 满足 ， 
则 会 顺序 判断 下 一 个 ,直到 全 部 的 条 件 都 判断 完 为 止 。 如 果 没 有 一 个 条 件 的 结果 为 真 , 则 执 
行 else 后 花 括 号 中 的 语句 。 

例 2-8 下 面 所 示 代 码 的 功能 是 通过 多 分 支 语句 判断 用 户 选择 了 哪个 单 选 按钮 。 

=html> 

所 head 一 

二 meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

二 title 志 例 2-8 二 /title> 

=script language= "javascript"> 

function check(){ 


if(document. forml.gl.checked){ 


alert(" 你 是 大 一 年 级 的 同学 "); 





} 
else if(document. forml.g2.checked){ 
alert(" 你 是 大 二 年 级 的 同学 "); 
} 
else if(document. forml.g3.checked){ 
alert(" 你 是 大 三 年 级 的 同学 ") ; 
} 
else if(document. form]. g4. checked){ 
alert(" 你 是 大 四 年 级 的 同学 "); 
} 
else{ 
alert(" 请 选择 "); 
} 
} 
</script><=/head> 
bodyss 
=form id= "forml" name= "form]l" method= "post" action=""> 
二 p 二 请 选择 你 所 在 的 年 级 : 二 /p 二 
一 pb 二 一 input type 二 "radio" name 二 "radio" id 二 "gl" value 二 "radio" /请 大 学 一 年 级 二 /p 二 
=p> 过 input type 二 "radio" name 一 "radio" id 二 "g2" value 二 "radio" /请 大 学 二 年 级 二 /p 二 
p> 二 input type= "radio" name 一 "radio" id 一 "g3"” value 二 "radio" /二 大 学 三 年 级 一 /p 二 
二 p 二 二 input type 一 "radio" name 一 "radio" id 一 "g4" value 一 "radio" / 盖 大 学 四 年 级 二 /p 二 
二 p 二 一 input type 一 "button" name 一 "button" id 一 "button” value 一 "提交 "onclick 一 "check()"/ 二 
</p> 
</form><=/body><=/html> 


使 用 让 .else if..…else 语句 可 以 进行 多 个 条 件 的 判断 ,首先 判断 用 户 是 否 选 择 了 第 一 个 单 


选 按 钮 (document. forml. gl1. checked) ,如 果 结 果 为 假 , 则 继续 判断 每 一 个 单 选 按 钮 ;如 果 用 户 
没有 选择 任何 一 个 单 选 按钮 , 则 会 执行 else 后 的 语句 。 本 代码 的 执行 效果 如 图 2-8 所 示 。 
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请 这 择 你 所 在 的 年 顷 。 
大 学 -年 级 
日 大 学 年 级 
日 大 学 = 年 级 
日 大 学 四 年 级 


用 Javascript 提醒 





你 是 大 一 年 级 的 同学 




















图 2-8 ”让 ...else if...else 语句 的 执行 效果 图 
(4) switch...case 语句 


除了 计 ..else 让..else 语句 是 多 分 支 条 件 语句 外 ,本 语句 的 主要 功能 也 是 进行 多 个 条 件 
的 判断 ,其 语法 格式 如 下 : 


switch(n){ 
case cl: 
执行 代码 块 1 
break 
case c2: 
执行 代码 块 2 
break 
default: 
如 果 n 既 不 是 1 也 不 是 2, 则 执行 此 代码 
} 


switch 后 面 的 值 ( 即 2 可 以 是 表达 式 , 也 可 以 是 变量 。 表 达 式 中 的 值 会 与 case 后 的 常 
量 值 作 比较 ,如 果 与 某 个 case 相 匹配 ,那么 其 后 的 代码 就 会 被 执行 。break 的 作用 是 防止 代 
码 自动 执行 到 下 一 行 。 

例 2-9 下 面 代码 的 功能 是 判断 用 户 输入 的 值 , 然 后 设置 页 面 背 景 颜 色 。 

二 html 二 二 head 二 


所 meta http-equiv= "Content-Type" content= "text/html; charset 一 utf-8" /> 
二 title 二 例 2-9 一 /title 二 

< 一 script language= "JavaScript"> 

function modifybgcolor(O) { 





switch( document. forml. color. value) { 
case "red": 


document. bgColor= "red"; 


break; 
case "green": 


document. bgColor= "green"; 
break; 


case "blue": 


document. bgColor 一 "blue" ; 
break; 


case "yellow": 


document. bgColor= "yellow"; 
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break; 
case "white" : 
document. bgColor= "white" ; 
break; 
default: 
alert(" 输 入 的 颜色 名 称 不 支持 !"); 
break; 
} 
} 
/script><=/head><body> 
=form id= "forml" name= "forml" method= "post" action=""> 
一 p 二 请 输入 一 个 颜色 名 称 ( 只 能 输入 red greenblue、yellow、white): 一 /p 二 
<p><input type= "text" name= "color" id 一 "color" /></p> 
一 p 二 一 input type 一 "button”name 一 "button" id 一 "button”value 一 "修改 颜色 " onClick 一 


"modifybgcolor()"/>=/p> 
=/form><=</body><=/html> 


本 代码 中 使 用 了 switch 语句 判断 用 户 输入 了 什么 值 ,首先 根据 对 应 的 值 ,执行 相应 
case 语句 后 的 代码 ,比如 用 户 输入 了 “red”, 则 “document. forml. color. value” 的 值 即 为 
“red”; 其 次 与 所 有 case 后 的 内 容 进 行 匹配 ;最 后 执行 把 背景 设置 为 红色 的 语句 。 在 switch 
语句 中 ,每 一 个 case 中 的 代码 执行 完成 后 ,要 执行 一 条 “break” 语 句 ,表示 此 case 执行 完成 。 
如 果 所 有 的 case 后 的 值 都 不 匹配 , 则 要 执行 “default” 下 的 语句 。 

本 代码 的 执行 效果 如 图 2-9 所 示 。 


请 输入 一 个 颜色 名 称 ( 只 能 输入 red、green、blue、 yellow、 white) ， 


夸 JavaScript 提醒 
输入 的 颜色 名 称 不 支持 ! 





图 2-9 switch 语句 的 执行 效果 图 




















2.5.2 循环 结构 


当 重 复 执行 同一 段 代 码 或 进行 遍历 数组 等 操作 时 就 要 用 到 循环 语句 。 循 环 语句 也 是 程 
序 中 最 常用 的 结构 之 一 。 
(1) for 循环 
for 循环 的 语法 格式 如 下 : 
for( 变 量 一 开始 值 ;变量 一 一 结束 值 ;变量 一 变量 十 步 进 值 ) { 
需 执行 的 代码 
} 
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for 后 面 的 括号 中 包括 3 个 部 分 ,每 个 部 分 都 使 用 分 号 分 隔 ,这 3 个 部 分 都 与 循环 变量 
有 关 , 它 是 控制 循环 次 数 的 一 个 重要 部 分 。 在 第 一 部 分 中 ,对 循环 变量 进行 初始 化 设置 ;第 
二 部 分 是 循环 继续 执行 的 条 件 ,一 般 是 让 循环 变量 小 于 或 小 于 等 于 某 一 个 值 ;第 三 部 分 是 增 
加 循环 变量 的 值 。 

需要 注意 ,在 for 循环 中 循环 变量 一 般 是 数字 类 型 的 。 循 环 变量 的 初始 值 必须 被 设置 ， 
如 果 不 设置 在 for 的 括号 里 面 , 也 可 以 设置 在 for 语句 的 前 面 。 循 环 变量 的 增 量 一 般 是 正 值 
(通常 是 1) ,这 时 要 求 变 量 的 初始 值 必须 要 小 于 结束 值 ; 如 果 循 环 变量 的 增 量 是 负 值 , 则 要 
求 初始 值 要 大 于 结束 值 ,否则 就 会 出 现 死 循 环 。 

(2) for...in 循环 

for...in 循环 的 语法 格式 如 下 : 

for( 变 量 in 对 象 或 数组 ){ 

在 此 执行 代码 

} 

for...in 循环 是 for 循环 的 一 种 变形 ,其 主要 用 于 遍历 数组 或 者 对 象 的 属性 , 即 对 数组 
或 者 对 象 的 属性 进行 循环 操作 。 

例 2-10 下 面 代 码 的 功能 是 通过 for...in 循环 遍历 数据 中 的 数据 并 显示 。 

=html><head> 

meta http-equiv= "Content-Type" content= "text/html; charset= utf-8" /> 


二 title> 例 2-10 一 /title 
< 一 script language= "javascript"> 





Var x 
var colorArray 一 new Array() 
colorArray[0] 一 "red" 
colorArray[1] 一 "green" 
colorArray[2] 一 "blue" 
colorArray[3] = "yellow" 
colorArray[4| = "black" 
colorArray[5] = "white" 
colorArray[6] = "pink" 
for(x in colorArray){ 

document. write(colorArray[x] 十 "=br>") 
} 





</script><=/head> 
<body> 
二 p 二 以 上 是 使 用 for...in 循环 列 出 的 颜色 值 : 
</body></html> 蒜 曙 
blue 
在 这 段 代码 中 ,首先 定义 了 一 个 循环 使 用 的 变量 x, 然 后 “iw 
定义 了 数组 对 象 , 并 依次 对 每 一 个 数组 元 素 赋值 ,最 后 使 用 | 


for...in 循环 遍历 数组 并 显示 出 来 。 这 段 代 码 的 执行 效果 如 | 以 上 是 使 用 fcr in 条 环 列 出 的 颜色 值 ; 
图 2-10 所 示 。 

(3) while 循环 

while 循环 的 语法 格式 如 下 : 





图 2-10 for...in 循环 的 
执行 效果 图 
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whbile( 判 断 条 件 )!{ 
需 执行 的 代码 

} 

while 循环 和 for 循环 相似 ,都 可 以 重复 执行 一 段 代 码 , 但 while 循环 后 的 花 括 号 中 只 有 
一 个 继续 执行 循环 条 件 的 判断 ,因此 while 循环 不 但 可 以 进行 数字 表达 式 的 判断 ,也 可 以 进 
行 其 他 类 型 表达 式 的 判断 。 

例 2-11 下 面 的 代码 完成 循环 显示 数组 中 值 的 功能 。 

=html><=head> 

meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 


过 title 二 例 2-11 一 /title> 
=script language= "javascript"> 





Var x 
var colorArray 一 new Array() 
colorArray[0] 一 "red" 
colorArray[1] 一 "green" 
colorArray[2] 一 "blue" 
colorArray[3] 一 "yellow" 
colorArray[4] 一 "black" 
colorArray[5] 一 "white" 
colorArray[6] 王 "pink" 


x=0 

while(colorArray[x] ! 王 "black"){ 
document. write(colorArray[x] 十 "一 br 二 ") 
区 

} 

</script><=/head> 

=body> 


去 p 二 以 上 是 使 用 while 循环 列 出 的 颜色 值 , 直 到 颜色 值 是 “black" 时 结束 : 

</body><=/html> 

在 本 段 代码 的 前 面 先是 定义 了 变量 x 和 一 个 数组 ,并 对 数组 进行 了 赋值 ,然后 对 遍历 数组 
用 的 变量 x 进行 了 初始 化 ,在 while 循环 中 依次 检查 每 一 个 数组 的 值 ,直到 值 是 “black” 为 止 循 
环 才 结束 ,在 循环 中 进行 了 内 容 的 显示 ,同时 对 变量 x 进行 了 增 量 操作 ,这 里 需要 注意 ,如 果 在 
循环 中 忘 了 对 x 进行 增 量 操作 , 则 循环 将 变 成 死 循 环 。 这 段 代 码 的 执行 效果 如 图 2-11 所 示 。 





以 上 是 使 用 while 循 环 列 出 的 颜色 值 , 直到 颜色 值 是 “black” 时 结束 : 





图 2-11 while 循环 的 执行 效果 图 


2.6 函 数 


函数 是 由 事件 驱动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 函 数 为 用 户 提供 
了 一 个 非常 方便 的 功能 。 通 常 在 进行 一 个 复杂 的 程序 设计 时 ,应 根据 所 要 完成 的 功能 ,将 程 
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序 划 分 为 一 些 相对 独立 的 模块 ,每 个 模块 编写 一 个 函数 。 从 而 ,使 各 部 分 充分 独立 ,任务 单 
一 ,程序 清晰 、 易 懂 、 易 读 、 易 维护 。 


2.6.1 函数 的 定义 和 调用 


1. JavaScript 国 数 定义 
函数 就 是 包 右 在 花 括号 中 的 代码 块 ,前 面 使 用 了 关键 词 function 。 


function 函数 名 ([ 参 数 ] , [参数 ] ) 
{ 

执行 代码 ; 
} 


说 明 : JavaScript 对 大 小 写 敏 感 。 关 键 词 function 必须 是 小 写 的 ,并 且 必 须 以 与 函数 名 
称 相同 的 大 小 写 来 调用 函数 参数 表 , 当 调用 该 函数 时 ,会 执行 函数 内 的 代码 。 
括号 ( ) 的 参数 ,可 以 有 也 可 以 没有 ,根据 要 实现 的 功能 设置 参数 的 个 数 。 


2. 调用 不 带 参数 的 函数 


用 户 可 以 在 某 事 件 发 生 时 直接 调用 函数 (比如 当 用 户 单 击 按钮 时 ), 并 且 可 由 
JavaScript 在 任何 位 置 进行 调用 。 
例 2-12 输入 以 下 代码 ,调用 不 带 参数 的 函数 。 


=html><=head> 
meta http-equiv= "Content-Type" content= "text/html; charset= ut{-8" /> 
< 一 title 二 单 击 调用 JS 函数 二 /title 二 
<head> 
=script> 
function firstFunction( ) 
{ 
alert("Hello World!"); 
} 
=</script> 
=/head> 
=body> 
过 button onclick 二 "firstFunction()" 祖 单 击 调用 JS 函数 二 /button 二 
=/body> 
=/html> 


调用 不 带 参 数 的 函数 的 显示 效果 如 图 2-12 所 示 。 
3. 调用 带 参数 的 函数 


在 调用 函数 时 ,可 以 向 其 传递 值 ,这 些 值 被 称 为 参数 。 这 些 参数 可 以 在 函数 中 使 用 。 可 
以 发 送 任意 多 的 参数 ,由 逗号 (,) 分 隔 。 变 量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 
是 第 一 个 被 传递 的 参数 的 给 定 的 值 ,以 此 类 推 。 





口 单 击 调用 JS 函数 x 
© | 2-12html 














Hello World! 
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例 2-13 输入 以 下 代码 ,调用 带 参 数 的 函数 。 


=html> 
=head> 
二 meta charset= "ut{-8"> 
二 title 二 调用 带 参数 的 函数 二 /title 二 
=script> 
function userinfo( name, age){ 
alert(" 姓 名 : " 十 name 十 ", 年 龄 " 十 age); 





} 

=/script> 

=/head> 

=body> 

三 p 二 单 击 这 个 按钮 ,来 调用 带 参数 的 函数 .二 /p 二 

过 button onclick 二 "userinfo( 张 三 ",24)" 二 调用 JS 带 参数 的 函数 二 /button 二 
=/body> 

=/html> 


调用 带 参数 的 函数 的 显示 效果 如 图 2-13 所 示 。 






| < > © 9 az-13html 
单 击 这 个 按钮 ， 来 调用 带 参数 的 函数 。 
ET 


此 网 页 显示 : 














姓名 : 张 三 ., 年 龄 24 
口 禁止 此 页 再 显示 对 活 框 - 








2-13 调用 带 参 数 的 函数 


2.6.2 带 有 返回 值 的 函数 


1. 带 有 返回 值 的 JavaScript 函数 定义 


有 时 会 希望 函数 将 值 返回 调用 它 的 地 方 。 可 以 使 用 return 语句 来 实现 。 在 使 用 
return 语句 时 ,函数 会 停止 执行 ,并 返回 指定 的 值 。 
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function 函数 名 ([ 参 数 ] , [参数 ]) 
{ 

执行 代码 

return 表达 式 ; 


2. 调用 有 返回 值 的 函数 


调用 函数 时 整个 JavaScript 并 不 会 停止 执行 ,调用 后 将 被 返回 值 取代 。 从 调用 处 继续 
执行 程序 。 
例 2-14 输入 以 下 代码 ,计算 两 个 数字 的 和 ,并 返回 结果 。 


=html> 

=head> 

二 meta charset= "ut{-8"> 
=script> 

function addab(numl,num2) 


{ 





sum 一 numl 十 num2; 
return sum; 
} 
=/script> 
二 /head 二 
二 body 二 
去 p 二 本 例 调 用 的 函数 会 执行 一 个 计算 ,然后 返回 结果 : 二 /p 二 
42 十 33 一 一 input name 一 "demo" type 一 "text" id 一 "demo" size 一 "8" 二 
=script> 
document. getElementByld("demo"). value=addab(42, 33); 
</script> 
=/body> 
</html> 


显示 效果 如 图 2-14 所 示 。 








DO 2-14.html 
《< > QD o2-14html 
本 例 调用 的 函数 会 执行 一 个 计算 ， 然 后 返回 结果 ， 


42+33-|75 ] 





图 2-14 显示 效果 


2.6.3 变量 的 作用 域 


1. 局 部 JavaScript 变量 


在 JavaScript 函数 内 部 声明 的 变量 (使 用 var) 是 局 部 变量 ,所 以 只 能 在 函数 内 部 访问 
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它 ,该 变量 的 作用 域 是 局 部 的 。 用 户 可 以 在 不 同 的 函数 中 使 用 名 称 相同 的 局 部 变量 ,因为 只 
有 声明 过 该 变量 的 函数 才能 识别 出 该 变量 ,只 要 函数 运行 完毕 ,该 变量 就 会 被 删除 。 

2. 全 局 JavaScript 变量 


在 函数 外 声明 的 变量 是 全 局 变量 ,网 页 上 的 所 有 脚本 和 函数 都 能 访问 它 。 如 果 把 值 赋 
给 尚未 声明 的 变量 ,该 变量 将 被 自动 作为 全 局 变量 声明 。 


3. JavaScript 变量 的 生存 期 
JavaScript 变量 的 生存 期 从 它们 被 声明 的 时 间 开 始 。 局 部 变量 会 在 函数 运行 以 后 被 市 
除 。 全 局 变量 会 在 页 面 关闭 后 被 删除 。 


综合 案例 ,请 扫 一 扫 





. 编写 程序 ,实现 输出 乘法 口诀 表 。 
.编写 程序 ,实现 两 个 数 的 加 减 乘除 四 则 运算 。 

4， 编写 程 序 , 实 现 用 户 名 和 密码 的 判断 ,正确 的 用 户 名 为 “admin”, 密 码 为 "123456”。 
如 果 输 入 正确 ,显示 “验证 通过 ”; 如 果 输 入 错误 ,显示 “验证 失败 ”。 
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应 用 CSS 


世 


学 习 目 标 

掌握 CSS 的 基本 语法 定义 规则 。 

掌握 CSS 的 使 用 方法 。 

掌握 CSS 设置 网 页 中 各 种 元 素 样 式 的 方法 。 


3.1 CSS 概述 


CSS(cascading style sheet) 简 称 样式 表 , 它 是 一 种 用 于 控制 网 页 样式 的 标签 语言 。 本 
质 上 讲 CSS 是 一 组 格式 设置 规则 ,用 于 控制 页 面 元 素 的 外 观 。 这 就 形成 了 页 面 内 容 存放 在 
HTML 文件 中 ,而 用 于 定义 形式 的 CSS 规则 存放 在 另 一 文件 中 ,或 存放 在 HTML 文件 的 
另 一 部 分 (通常 为 网 页 的 首部 ), 从 而 实现 了 内 容 与 表示 形式 的 分 离 。 

1997 年 初 ,W3C 内 组 织 了 专门 管 CSS 的 工作 组 ,开始 讨论 第 1 版 中 没有 涉及 的 问题 ， 
并 于 1998 年 5 月 出 版 CSS 第 2 版 。 而 后,W3C 又 致力 于 CSS 第 3 版 的 研究 。CSS3 由 一 
系列 标准 的 模块 构成 ,很 多 模块 现今 仍 处 于 开发 阶段 。 本 书 主要 对 现今 应 用 较 广 的 CSS2 
进行 讲解 。 


3.1.1 CSS 的 优点 


使 用 CSS 的 优势 ,主要 体现 在 以 下 几 个 方面 。 

(1) 内 容 和 样式 的 分 离 ,使 得 网 页 设计 趋 于 明了 ,简洁 。 

(2) 弥补 HTML 对 标签 属性 控制 的 不 足 。 如 在 HTML 中 可 控制 的 标题 仅 有 6 级 , 即 
hl 一 h6 ,而 利用 CSS 可 以 任意 设置 标题 大 小 。 

(3) 精确 控制 网 页 布局 ,如 行 间距 、. 字 间距 、 段 落 缩 进 和 图 片 定位 等 属性 。 

(4) 提高 网 页 效率 ,增强 易 用 性 和 可 扩展 性 。 多 个 网 页 同时 应 用 一 个 CSS 样式 , 既 减 少 
了 代码 的 下 载 ,又 提高 了 浏览 器 的 浏览 速度 和 网 页 的 更 新 速度 ,并 能 提高 网 页 的 编辑 维护 效 
率 。 同 时 ,在 一 个 网 页 上 可 以 通过 调用 不 同 的 样式 表 来 切换 不 同 的 网 页 外 观 。 

(5) 增强 网 页 特效 ,提高 用 户 体验 。CSS 还 有 很 多 特殊 功能 ,如 鼠标 指针 属性 控制 鼠标 
的 形状 和 滤 镜 属性 控制 图 片 的 特效 等 。 
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3.1.2 ”如 何 编辑 CSS 


CSS 文件 与 HTML 文件 一 样 ,都 是 纯 文本 文件 ,因此 一 般 的 文字 处 理 软件 都 可 以 对 
CSS 进行 编辑 。 记 事 本 和 UltraEdit 等 最 常用 的 文本 编辑 工具 对 CSS 的 初学 者 尤其 有 帮 
助 。 在 网 上 也 能 找到 很 多 CSS 的 编辑 器 或 在 线 编辑 器 ,这 里 使 用 Dreamweaver 的 纯 代 码 
模式 。 

Dreamweaver 这 款 专业 的 网 页 设计 软件 在 代码 模式 下 对 HTML、CSS 和 JavaScript 等 代码 
有 着 非常 好 的 语法 着 色 以 及 语法 提示 功能 ,并 且 自 带 很 多 实例 ,对 CSS 的 学 习 很 有 帮助 。 

例 3-1 编辑 CSS 代码 ,图 3-1 所 示 的 就 是 例 3-1 的 编辑 图 。 
















代码 模式 






翅 | 区 03 加 


总 

















显示 行 一 轿 ody> 
但 <h2>CSS 标 记 1</h2> 
一 《<p>CSS 标 记 的 正文 内 容 1</p> 
只 <h2>CSS 标 记 2</h2> 
《p>CSS 标 记 的 正文 内 容 2</p> 
| <《h2>CSS 标 记 3</h2> 
三 人 p>CSS 标 记 的 正文 内 容 3</p> 
行 号 一 《h2>CSS 标 记 4</h2> 
久 <p>CSS 标 记 的 正文 内 容 4</p》 
| 2» 
图 3-1 Dreamweaver 的 代码 模式 扫 一 扫 
=html> 
一 head 一 
二 title 二 页 面 标题 二 title 二 
<style> 
<!— 
h21{ 
font-family: 幼 圆 ; 
color: red; 
} 
ed 
=/style> 
=/head> 
<body> 


<h2>CSS 标签 1</h2 二 
二 pCSS 标签 的 正文 内 容 1 二 /p> 
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二 h2 之 CSS 标签 2 一 /h2> 
一 p>CSS 标签 的 正文 内 容 2 一 /p> 
二 h2>>CSS 标签 3 二 /h2 
二 pCSS 标签 的 正文 内 容 3 二 /p 二 
二 h2>>CSS 标签 4</h2 二 
二 p 记 CSS 标签 的 正文 内 容 4 二 /p> 
到 /body> 
=/html> 
对 于 CSS 代码 ,在 默认 情况 下 都 采用 粉红 色 进 行 语法 着 色 , 而 HTML 代码 中 的 标签 则 
是 蓝 色 ,正文 内 容 在 默认 情况 下 为 黑色 。 而 且 对 于 每 行 代码 ,前 面 都 有 行 号 进行 标签 ,方便 
对 代码 的 整体 规划 。 
在 Dreamweaver 中 ,无 论 是 CSS 代码 还 是 HTML 代码 ,都 有 很 好 的 语法 提示 。 在 编 
写 具 体 CSS 代码 时 , 按 Enter 键 或 空格 键 都 可 以 触发 语法 提示 。 例 如 在 图 3-1 中 , 当 光 标 移 
动 到 “color:red; ”一句 的 末尾 时 , 按 空 格 键 或 Enter 键 ,都 可 以 触发 语法 提示 的 功能 。 如 图 3-2 
所 示 ,Dreamweaver 会 列 出 所 有 可 以 供 选择 的 CSS 样式 ,方便 设计 者 快速 进行 选择 ,从 而 提 
高 工作 效率 。 
而 且 , 当 已 经 选 定 某 个 CSS 样式 ,例如 上 例 中 的 color 样式 ,在 其 冒号 后 面 青 按 空格 键 
时 ,Dreamweaver 会 弹出 新 的 详细 提示 框 , 让 用 户 对 相应 CSS 的 值 进行 直接 选择 ,如 图 3-3 
所 示 的 调 色 板 就 是 其 中 的 一 种 情况 。 

















style> 
Ei- 

2 

了 font-fanily: 幼 贺 6 Ee 

8 color:blue font-fanily: 幼 圆 
Ei © arimuth 辐 color: 

10 = © backeround 国 

11 /style> © backeround-attachment 

12 bond backgr ound-color /style> 

ER boay> 人 backeround-inage 2 

14 <h2>CSS 标 记 1@ background-position 

15 <p》CSS 标 记 的 backeround-repeat 

16 《h22CSS 标 记 2S eraer tt 

i ss ee tii | 

19 《p>C55 标 记 的 正文 内 容 3C/p> 





图 3-2 ”Dreamweaver 语法 提示 图 3-3 调 色 板 


3.2 CSS 选择 器 


样式 表 中 的 内 容 使 得 页 面 的 外 观 发 生 明 显 的 变化 :也 就 是 CSS 的 描述 部 分 或 者 叫 定义 
部 分 。 通 常情 况 下 ,CSS 的 描述 部 分 是 由 CSS 的 选择 器 来 承担 的 。 





3.2.1 CSS 基本 语法 


基本 语法 如 下 : 
selector {property: value; property: value; ...property: value; } 


其 中 ,selector 代表 选择 器 ;property 代表 属性 ;value 代表 属性 值 。 每 一 组 属性 和 属性 
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值 称 为 一 个 声明 。 属 性 和 属性 值 要 用 冒号 隔 开 ; 每 一 个 声明 要 用 分 号 结束 。 如 果 属 性 值 由 
多 个 单词 组 成 ,并 且 单 词 问 有 空格 ,那么 必须 给 值 加 上 引号 。 

CSS 选择 器 就 是 CSS 样式 的 名 字 。 选 择 器 的 命名 可 以 使 用 英文 字母 的 大 写 与 小 写 .数字 、 
连 字 号 .下 画 线 .冒号 ,句号 ,CSS 选择 器 只 能 以 字母 开头 ,选择 器 在 CSS 中 可 分 成 多 种 ,主要 包 
括 标签 选择 器 ,类 选择 器 ID 选择 器 ,通配符 选择 器 、 伪 类 、 派 生 选 择 器 、 群 选择 器 。 


3.2.2 标签 选择 器 


标签 选择 器 是 现 有 的 HTML 标签 (或 称 标签 )。 用 CSS 控制 这 些 标 签 ,会 改变 标签 的 
默认 样式 。 其 语法 格式 如 下 : 


标签 名 称 { 属性 : 属性 值 ; 属性 : 属性 值 ;….} 
例 3-2 定义 和 使 用 标签 选择 器 ,如 图 3-4 所 示 。 


二 !DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

=head> 

<<title>class 选择 器 与 标签 选择 器 二 /title 二 
所 style type= "text/css"> 











口 dass 选 泽 器 与 标记 选择 器 x 人 








pl i 
color: blue; 所 了》 CG Dfile///D:/ 第 3 章 /3-2.html 窜 
font-size:18px; } elass 选 择 器 与 标签 选择 器 1 

</style> class 选 择 器 与 标签 选择 器 2 

</head> 
class 选 择 器 与 标签 选择 器 3 
一 body> class 选 择 器 与 标签 选择 器 5 
去 p>class 选择 器 与 标签 选择 器 1 二 /p 二 class 选 择 器 与 标签 选择 器 6 
二 pclass 选择 器 与 标签 选择 器 2 二 /p 二 
一 p>class 选择 器 与 标签 选择 器 3 一 /p 二 图 3-4 标签 选择 器 


所 p>class 选择 器 与 标签 选择 器 5 一 /p 二 
所 p>class 选择 器 与 标签 选择 器 6 一 /p 二 
</body> 
=/html> 


3.2.3 类 选择 器 


当 需 要 对 一 个 网 页 中 的 部 分 相同 标签 进行 一 样 的 样式 设置 时 , 则 需要 给 这 些 标签 一 个 新 
的 别名 ,并 对 这 些 具有 新 别名 的 标签 进行 样式 设置 ,以 满足 设计 需求 ,这 种 样式 的 选择 器 被 称 
作 类 选择 器 。 用 类 选择 器 可 以 把 相同 的 元 素 分 类 定义 成 不 同 的 样式 。 其 语法 格式 如 下 : 

.新 别名 { 属性 : 值 ; 属性 : 值 ; .…} 


进行 类 选择 器 类 型 定义 分 为 两 步 : 第 一 步 为 标签 定义 新 别名 ;第 二 步 为 在 网 页 中 对 应 
的 标签 上 使 用 类 选择 器 ,格式 为 “二 标签 class 一 "新 别名 "二 ”。 类 选择 器 与 ID 选择 器 名 称 
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应 该 由 字母 开始 ,随后 使 用 任意 字母 ,数字 、 连 接线 和 下 夯 线 。 常 用 的 网 页 元 素 名 称 大 多 是 
根据 网 页 元 素 的 位 置 和 作用 命名 的 ,常用 命名 方法 如 news_title、NewsTitle 等 。 
例 3-3 定义 和 使 用 类 选择 器 ,如 图 3-5 所 示 。 


一 !DOCTYPE html PUBLIC "一 //W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

=head> 

< 一 title 二 class 选择 器 二 /title 二 

一 style type= "text/css"> 











.one{ color:red; 站 dass 选 泽 器 
font-size: 18px; } 后 了 CG DD file:///D:/ 第 3 章 /3-3.html 客 
‘two{ color:green; class 选 择 器 1 


font-size:20px; } 


class 选 择 器 2 


.three{ color:cyan; 
font-size:22px; } 









</style> 
=/head> h3 同 样 适用 

=body> 
二 p class 一 "one" 二 class 选择 器 1 一 /p> 图 3-5 类 选择 器 示例 
< 一 p class 一 "two" 二 class 选择 器 2 一 /p> 
=p clas: three" 二 class 选择 器 3 二 /p 二 
< 一 h3 class= 一 "two" 二 h3 同样 适用 二 /h3 过 

</body> 

=</html> 

3.2.4 ID 选择 器 


在 HTML 文档 中 ,需要 唯一 标识 一 个 元 素 时 ,就 会 赋予 它 一 个 id 标识, 以便 在 对 整个 
文档 进行 处 理 时 能 够 很 快 地 找到 这 个 元 素 。 而 ID 选择 器 就 是 用 来 对 这 个 单一 元 素 定义 单 
独 的 样式 。 其 语法 格式 如 下 : 

新 别名 { 属性 : 值 ; 属性 : 值 ; .…} 
例 3-4 定义 和 使 用 ID 选择 器 ,如 图 3-6 所 示 。 


和 口 





// 癌 ID 运 择 器 x\ 
所 了 CG DD file:///D:/ 第 3 章 /3-4.html 放 
ID 选择 器 1 





ID 选择 器 2 





图 3-6 ID 选择 器 示例 


=!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
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=html> 

<head> 

< 一 title 二 ID 选择 器 二 /title 二 

所 style type= "text/css"> 

#one{l font-weight:bold; /x* 粗 体 x*/ } 


#two{l font-size:30px; /* 字体 大 小 */ 
color: #009900; /* 颜 色 */ } 
=/style> 
</head> 
=body> 


二 p id 一 "one">ID 选择 器 1 一 /p> 
二 p id="two" 二 ID 选择 器 2 一 /p> 
=/body> 
=/html> 


ID 选择 器 不 能 用 于 多 个 标签 , 因为 每 个 标签 定义 的 id 不 只 是 CSS 可 以 调用 ， 
JavaScript 等 其 他 脚本 语言 同样 也 可 以 调用 ,如 果 一 个 HTML 中 有 两 个 相同 的 id 标签 , 那 
么 将 会 导致 JavaScript 在 查找 id 时 出 错 。 网 站 建设 者 在 编写 CSS 代码 时 ,应 该 养 成 良好 的 
编写 习惯 ,一 个 id 最 多 只 能 赋予 一 个 HTML 标签 。 

通过 上 述 3 个 例子 ,可 以 看 出 不 同 的 选择 器 样式 适用 范围 是 不 一 样 的 : 需要 定义 唯一 
的 样式 或 者 用 来 布局 , 则 选用 ID 选择 器 样式 。 需 要 改变 某 一 HTML 标签 的 部 分 样式 用 类 
选择 器 样式 。 需 要 改变 某 一 HTML 标签 的 全 部 样式 用 类 型 选择 器 样式 。 

同时 ,在 应 用 选择 器 的 过 程 中 ,可 能 会 遇 到 同一 个 元 素 由 不 同 选择 器 定义 的 情况 ,这 时 
就 要 考虑 到 选择 器 的 优先 级 。 通 常 使 用 的 选择 器 包括 ID 选择 器 .类 选择 器 .派生 选择 器 和 
类 型 选择 器 等 。 因 为 ID 选择 器 是 最 后 被 加 到 元 素 上 的 ,所 以 优先 级 最 高 ,其 次 是 类 选择 器 ， 
再 后 才 是 类 型 选择 器 。 








3.2.5 其 他 选择 器 


1. 派生 选择 器 

当 仅 仅 想 对 某 一 元 素 中 的 子 元 素 进行 样式 指定 时 ,派生 选择 器 就 被 派 上 了 用 场 , 派 生 选择 
器 指 选择 器 中 前 一 个 元 素 包含 后 一 个 元 素 ,元 素 之 间 使 用 空格 作为 分 隔 符 。 语 法 格式 如 下 : 

选择 器 选择 器 { 属性 : 属性 值 ; 属 性 : 属性 值 ;…} 


其 中 ,选择 器 可 以 是 标签 名 称 、 类 选择 器 ID 选择 器 。 
例 3-5 定义 和 使 用 派生 选择 器 ,如 图 3-7 所 示 。 


eed 


OO ew | 


宽 收藏 天 


谋 套 使 用 CSS 标 记 的 方法 
内 套 之 外 的 标记 不 生效 





图 3-7 派生 选择 器 示例 
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二 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
=html> 
<head> 
<title>CSS 选择 器 的 嵌 套 声明 二 /title 一 
=style type= "text/css"> 
pb! 
font-size: 18px; 
color: #CC0000; 
text-decoration: underline; } 
</style> 
=/head> 
=body> 
一 p 二 典 套 使 二 b> 用 CSS 二 /b 二 标签 的 方法 二 /p 二 
内 套 之 外 的 二 b 二 标签 二 /b 二 不 生效 
</body> 
=/html> 


2. 伪 类 


伪 类 不 属于 选择 器 , 它 是 让 页 面 呈现 丰富 表现 力 的 特殊 属性 。 之 所 以 称 为 “ 伪 ”, 是 因为 
它 指定 的 对 象 在 文档 中 并 不 存在 ,它们 指定 的 是 元 素 的 某 种 状态 。 

应 用 最 为 广泛 的 伪 类 是 链接 的 4 个 状态 。 

(1) 未 访问 链接 状态 (a:link) 。 

(2) 已 访问 链接 状态 Ca:visited) 。 

(3) 鼠标 指针 悬 停 在 链接 上 的 状态 (a:hover) 。 

(4) 被 激活 (在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 的 链接 状态 (a:active) 。 

例 3-6 为 网 页 文字 中 的 链接 制作 相应 的 样式 ,如 图 3-8 所 示 。 


帮 动态 超 链 接 Windows Internet Explorer 








旧 ] C:\Docments and Setti 赴 国 


























忻 动 太 起 链接 











图 3-8” 伪 类 示例 


一 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

=head> 
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< 一 title> 动 态 超 链接 二 /title> 
<style> 
二 ! 一 
body{ 
cursor: pointer;} 
.charal{ 
font-size: 12px; 
background-color: # 90bcff; } 
.charal td{ 
text-align: center;} 
a:link{ 
color: #005799; 
text-decoration: none; } 
a:visited{ 
color: #000000; 
text-decoration: none; } 
a:hover! 
color: # FFFFO00; / 
text-decoration: underline;} 
-> 
</style> 
</head> 
=body> 
=table align= "center" cellpadding= "1" cellspacing= "0"> 
<tr><td><img src="90.jpg" border="0"></td></tr> 
=/table> 
=table width= "600px" cellpadding= "2" cellspacing= "2" class= "charal" align= "center"> 
<tr> 
二 td 二 <a href="#" 志 首页 </a>></td> 
二 td 二 <a href 一 "# "心情 日 记 王 /a> 雪 /td> 
<td><a href="#">Free</a></td> 
二 td 二 <a href 一 "# "全 一 起 走 到 <</a> 王 /td> 
二 td 二 <a href 一 "# "之 从 明天 起 一 /a> 志 /td> 
<<td>><a href 一 "# "之 纸 飞机 王 /a> 王 /td 
<<td>><a href 一 "#" 盖 下 一 站 <</a><</td> 
</tr> 
=/table> 
=/body> 
=/html> 


另外 ,还 有 一 些 伪 类 在 网 页 元 素 样式 的 控制 上 起 到 了 很 好 的 作用 ,详情 请 参考 
W3CHTML 网 站 的 介绍 : http://www. w3chtml. com/css3/selectors/pseudo-classes/。 


3. 群 选择 器 


如 果 需 要 给 多 个 元 素 使 用 相同 的 设 定 , 可 以 使 用 群 选择 器 ,将 选择 器 写 在 一 起 ,用 逗号 
将 选择 器 分 开 ,来 避免 重复 定义 样式 。 语 法 格式 如 下 : 


选择 器 ,选择 器 …{ 属性 : 属性 值 ; 属 性 : 属性 值 ;属性 : 属性 值 ;…} 
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例 3-7 群 选择 器 的 定义 和 使 用 ,如 图 3-9 所 示 。 





= 二 口 
癌 集体 声明 x\ 


了 CG Dfile:///D:/ 第 3 章 /3-7.html 空 
群 选择 器 hl 
群 选 择 器 h2 
群 选择 器 h3 


群 选择 器 h4 








群 选择 器 h5 


群 选择 器 pl 
群 选择 器 p2 
群 选择 器 p3 








图 3-9 和 群 选择 器 示例 





二 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

=head> 

二 title 二 集体 声明 过/title 二 

style type= "text/css"> 


hl, h2, h3, h4, h5, p{ /* 集 体 声明 */ 
color: purple; /* 文字 颜色 * / 
font-size:15px; /x 字体 大 小 x*/ 

} 

h2. special, . special， #0onel{ /* 集 体 声明 * / 
text-decoration: underline; /x* 下 面 线 x*/ 

) 

</style> 
</head> 

所 body 二 


去 hl> 群 选择 器 hl 二 /hl 
二 h2 class 二 "special" 二 群 选择 器 hb2 一 /h2 二 
二 h3 二 群 选择 器 hj 二/h3 二 
二 h4 二 群 选择 器 hd 二/h4 二 
二 h5 二 群 选择 器 h5 二 /h5 二 
二 p 二 群 选择 器 pl 二 /Pp 二 
二 p class 一 "special" 二 和 群 选择 器 p2 二 /p 二 
< 一 p id= "one" 二 和 群 选择 器 p3 二 /p 二 
</body> 
=/html> 


4. 通配符 选择 器 


通配符 * 在 很 多 场合 被 用 作 代表 所 有 的 内 容 , 在 CSS 中 也 不 例外 。 当 需要 对 网 页 中 所 
有 元 素 进行 统一 设置 时 ,通常 采用 通配符 。 
由 于 不 同 浏览 器 对 于 同样 的 页 面 元 素 有 不 同 的 默认 样式 ,所 以 通常 可 以 使 用 通配符 星 
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号 (* ) 先 将 所 有 可 能 影响 布局 的 默认 样式 统一 一 下 。 而 星 号 (* ) 匹 配 所 有 元 素 ,省 去 了 一 
个 一 个 去 写 元 素 名 称 的 麻烦 。 其 语法 格式 如 下 : 


* {属性 : 属性 值 ;属性 : 属性 值 ;属性 : 属性 值 ;…} 


例 3-8 通配符 选择 器 的 定义 和 使 用 。 
浏览 效果 除了 显示 的 文字 有 区 别 外 ,样式 与 图 3-9 完全 相同 ,但 代码 却 大 大 缩减 了 ,这 
种 全 局 声明 的 方法 在 一 些小 页 面 中 特别 实用 。 


=!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

=head> 

过 title 志 全 局 声明 过 /title 二 

=style type= "text/css"> 

x*{ 





color: purple; 
font-size:15px; } 
h2. special, . special, #0one{ 
text-decoration: underline; )} 
=/style> 
=/head> 
二 body 二 
二 hl 二 群 选 择 器 hl 二 /hl 二 
一 h2 class 一 "special" 二 和 群 选 择 器 hb2 一 /h2 二 
去 h3> 群 选择 器 h3=/h3 二 
去 h4> 群 选择 器 h4 二 /h4 二 
过 h5 群 选择 器 h5 二 /h5 二 
二 p 二 通配符 选择 器 pl 二 /p 二 
二 p class 二 "special" 二 群 选择 器 p2 一 /p 二 
一 p id 二 "one" 记 群 选择 器 p3 二 /p 二 
=/body> 
=/html> 


3.3 CSS 的 使 用 方法 


样式 表 中 的 样式 是 针对 网 页 元 素 书写 的 ,只 有 将 样式 应 用 在 相应 的 网 页 元 素 上 ,并 通过 
浏览 器 显示 出 来 ,才能 让 用 户 看 到 效果 。 有 3 种 方法 可 以 在 站 点 网 页 上 使 用 CSS 样式 。 

行内 样式 : 将 样式 直接 写 在 各 个 网 页 元 素 的 标签 中 ,这 种 样式 只 对 样式 所 在 的 元 素 起 
作用 。 

内 嵌 式 : 在 网 页 二 head 二 标签 中 创建 租 入 的 样式 表 , 这 种 样式 只 针对 样式 表 所 在 网 页 
上 的 元 素 起 作用 。 

外 部 样式 : 将 样式 写 在 单独 的 一 个 文件 中 ,保存 为 “. css” 文 件 ,通过 链接 或 者 导入 的 方 
式 将 外 部 样式 表 应 用 到 网 页 上 ,这 种 方式 可 以 使 一 个 样式 表 作 用 在 不 同 的 网 页 上 。 





3.3.1 行内 样式 


行内 样式 是 所 有 样式 方法 中 最 为 直接 的 一 种 , 它 直 接 对 HTML 的 标签 使 用 style 属 
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性 ,然后 将 CSS 代码 直接 写 在 其 中 。 


行内 样式 基本 语法 如 下 : 
=head> 

< /led> 

=body> 


二 HTML 标签 style 二 "样式 属性 : 取 值 ;样式 属性 : 取 值 ;.…" 二 


body 

利用 这 种 方法 定义 的 样式 ,其 效果 只 能 控制 某 个 标签 ,所 以 比较 适用 于 指定 网 页 中 某 小 
段 文字 的 显示 风格 ,或 某 个 元 素 的 样式 。 

例 3-9 行内 样式 示例 ,如 图 3-10 所 示 。 


太行 内 样式 -Window... [Cc | 加 | 区 | 
一 : 
FO” conts Ee 
文件 中 ”编辑 加 ”查看 WD” 收 大 2 ” 
窗 收藏 天 | 箱 行 内 样式 











图 3-10 行内 样式 示例 


=!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
=html> 
=head> 
二 title 二 行内 样式 <</title 
=/head> 
<body> 
< 一 p style= "color: # FF0000; font-size:20px; text-decoration: underline; "二 正文 内 容 1 一 /p> 
二 p style 一 "color: #000000; fontstyle:italic;" 二 正文 内 容 2 二 /p 二 
一 p style 一 "color: # FFOOFF; font-size:25px; font-weight:bold;" 二 正文 内 容 3 一 /p> 
</body> 
=/html> 


行内 样式 是 最 为 简单 的 CSS 使 用 方法 ,但 由 于 需要 为 每 一 个 标签 设置 style 属性 ,因此 
后 期 维护 成 本 很 高 ,而 且 容 易 造 成 页 面 代码 元 余 , 无 法 发 挥 样式 表 的 优势 ,因此 不 推荐 使 用 。 


3.3.2 ”内 谋 式 


内 髋 式 就 是 将 CSS 样式 代码 写 在 二 head 之 与 一 /head 之 之 间 , 并 且 用 所 style 之 和 
去 /style> 标 签 进 行 声明 。 
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内 嵌 式 基本 语法 如 下 : 
<head> 

<style type= "text/css"> 
二 ! 一 


选择 器 {样式 属性 : 取 值 ;样式 属性 : 取 值 ;…} 

选择 器 {样式 属性 : 取 值 ;样式 属性 : 取 值 ;…} 

-> 

=/head> 

内 嵌 式 就 是 将 所 有 的 样式 表 信 息 都 列 于 HTML 文件 的 头 部 ,因此 这 些 样 式 可 以 在 整 
个 HTML 文件 中 调用 。 如 果 想 对 网 页 一 次 性 加 入 样式 表 , 即 可 选用 该 方法 。 

例 3-10 内 嵌 式 示例 ,如 图 3-11 所 示 。 


一 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/V/xhtmll/DTDVxhtmll-transitional. dtd"> 

<html> 

<head> 

二 title 二 页 面 标题 过 /title 二 
style type= "text/css"> 
p{ color:#FFOOFF; 











text-decoration: underline; 紫色 、 粗 体 、 下 夯 线 、25px 的 效果 1 

font-weight: bold; 紫色 、 粗 体 、 下 面 线 、25px 的 效果 2 目 

font-size:25px; } 紫色 、 粗 体 、 下 夯 线 、25px 的 效果 3 
</style> = 

</head> 图 3-11 内 嵌 式 示例 
=body> 


二 p 二 紫色 , 粗 体 、 下 面 线 .25px 的 效果 1 二 /p 二 
二 p 二 紫色 、 粗 体 、 下 面 线 .25px 的 效果 2 一 /p> 
二 p 二 紫色 、 粗 体 、 下 面 线 、25px 的 效果 3 二 /Pp 二 
=/body> 
=/html> 


可 以 从 例 3-9 中 看 到 ,所 有 CSS 的 代码 部 分 被 集中 在 了 同一 个 区 域 ,方便 了 后 期 的 维 
护 , 页 面 本身 也 大 大 瘦身 ,但 如 果 是 一 个 网 站 ,拥有 很 多 的 页 面 ,对 于 不 同 页 面 上 的 二 p 二 标 
签 都 希望 采用 同样 的 风格 时 ,内 嵌 式 就 显得 略微 麻烦 ,维护 成 本 也 不 低 , 因 此 仅 适 用 于 对 特 
殊 的 页 面 设置 单独 的 样式 风格 。 


3.3.3 链接 式 


该 方法 将 CSS 样式 写 在 单独 的 样式 文件 中 ,在 网 页 <head> 标 签 中 可 以 通过 一 link> 
标签 调用 该 样式 文件 。 链 接 式 CSS 样式 表 是 使 用 频率 最 高 ,也 是 最 为 实用 的 方法 。 它 将 
HTML 页 面 本 身 与 CSS 样式 风格 分 离 为 两 个 或 多 个 文件 ,可 实现 页 面 框架 HTML 代码 与 
美工 CSS 代码 的 完全 分 离 ,使 得 前 期 制作 和 后 期 维护 都 十 分 方便 。 

链接 式 基本 语法 如 下 : 
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=head> 


一 link rel 二 "stylesheet " type 二 "text/css"” href 一 "样式 表 文 件 的 地 址 "二 
=/head> 


CSS 文件 要 和 HTML 文件 一 起 发 布 到 服务 器 上 ,这 样 在 用 浏览 器 打开 网 页 时 ,浏览 器 
会 按照 该 HTML 网 页 所 链接 的 外 部 样式 表 来 显示 其 风格 。 
例 3-11 链接 式 示例 ,如 图 3-12 所 示 。 


=!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/ TR/xhtmll/ DTD/ xhtmll-transitional. dtd"> 
=html> 
=head> 
到 title> 页 面 标题 二 /title> 
<link href ="1. css" type 一" text/css" rel = 
"stylesheet" 二 
=/head> 
二 body 二 
二 h2 二 CSS 标题 1 二 /h2 二 
二 p 二 紫色 、 粗 体 、 下 面 线 、25px 的 效果 1 一 /p> 
二 h2 二 CSS 标题 2 二 /h2 二 
二 p 二 紫色 、 粗 体 、 下 夯 线 ,25px 的 效果 2 一 /p 二 
=</body> 
</html> 


然后 创建 文件 1. css, 如 下 所 示 : 图 3-12 链接 式 示 例 



































h2 { color: #0000FF; } 
p { color: # FFOOFF:; 
text-decoration: underline; 
font-weight: bold; 
{font-size:20px;} 
链接 式样 式 表 的 最 大 优势 在 于 CSS 代码 与 HTML 代码 完全 分 离 , 并 且 同 一 个 CSS 文 
件 可 以 被 不 同 的 HTML 所 链接 使 用 。 因 此 在 设计 整个 网 站 时 ,可 以 将 所 有 页 面 都 链接 到 
同一 个 CSS 文件 ,使 用 相同 的 样式 风格 。 如 果 整 个 网 站 需要 进行 样式 上 的 修改 ,就 仅仅 只 
需 修改 这 一 个 CSS 文件 即 可 。 


3.3.4 导入 样式 

导入 样式 表 与 3. 3. 3 小 节 提 到 的 链接 式样 式 表 的 功能 基本 相同 ,只 是 语法 和 运作 方式 
上 略 有 区 别 。 

导入 样式 基本 语法 如 下 : 

~=head> 


style type= "text/css"> 
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@import url( 外 部 样式 表 文 件 地 址 ); 
=/style> 


<=/head> 


例 3-12 导入 样式 示例 ,如 图 3-13 所 示 。 


/页 面 标题 - Windows Internet Explorer ”此 | 右 | 区 | 























BO 冉 cmoemets ,起 国 








CSS 标 题 1 

紫色 、 粗 体 、 下 画 线 、25px 的 效果 1 
CSS 标 题 2 

紫色 、 粗 体 、 下 画 线 、25px 的 效果 2 
CSS 标 题 3 

紫色 、 粗 体 、 下 画 线 、25px 的 效果 3 














图 3-13 导入 样式 示例 


二 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
=html> 
<head> 
<title 二 页 面 标题 二 /title 盖 
style type= "text/css"> 
@import url(l.css); 
=/style> 
<=/head> 
< 
二 h2CSS 标题 1 二 /h2 二 
一 p 二 紫色 、 粗 体 . 下 夯 线 .25px 的 效果 1 一 /p 二 
二 h2CSS 标题 2 二 /h2 二 
二 p 二 紫色 ,、 粗 体 、 下 夯 线 .25px 的 效果 2 一 /p 二 
所 h3 二 CSS 标题 3 一/h3 二 
二 p 二 紫色 , 粗 体 、 下 夯 线 .25px 的 效果 3 一 /p 二 
=/body> 
=/html> 


采用 import 方式 导入 的 样式 表 , 在 HTML 文件 初始 化 时 ,会 被 导入 HTML 文件 内 , 作 
为 文件 的 一 部 分 ,类 似 内 许 式 的 效果 。 而 链接 式样 式 表 则 是 在 HTML 的 标签 需要 格式 时 
才 以 链接 的 方式 引入 。 


-个 /--- Javascript+jQuery Web 交 互 程序 设计 一 


3.3.5 用 脚本 来 运用 CSS 样式 


JavaScript 与 CSS 都 是 标准 Web 的 重要 组 成 部 分 ,CSS 实现 页 面 的 表现 ,而 JavaScript 
主要 负责 页 面 的 行为 。 当 两 者 相 结合 时 通常 是 用 JavaScript 动态 地 加 载 或 更 换 CSS 来 实 
现 页 面 的 变化 。 

例 3-13 利用 JavaScript 脚本 动态 加 载 文 字 的 同时 ,让 文字 CSS 属性 发 生变 化 ,如 
图 3-14 所 示 。 





CQ |D filey//Djs/chapter3 字 | 三 


春节 (Spring Festival) 是 中 国民 间 最 隆重 最 富 
有 特色 的 传统 节日 ， 它 标志 农历 旧 的 一 年 结 
束 和 新 的 一 年 的 开始 。 春 节 一 0 





月 初 一 :但 在 民间 ， 传 统 得 义 
机 
舍 灶 ， 一 家 到 正月 二 五 


De 了 
新 、 记 福 换 注 、 祈 求 三 年 为 主 委 内 容 
丰富 多 彩 ， 带 和 有 浓郁 的 民族 特色 。 





图 3-14 用 脚本 来 运用 CSS 样式 示例 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3. 
org/ TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
=html> 
<head> 
过 title 二 颜色 渐变 的 文字 /title 二 
< 一 script language= "javascript" > 
function Delta(sHex], sHex2,iNum){ 
// 计 算 每 个 字 的 变化 量 
var iHexl 一 parseInt("0x" 十 sSHexl) ; 
var iHex2 一 parseInt("0x" 十 sSHex2) ; 
return (iHex2 - iHexl)/CiNum-l); 





} 
function Colorful(sText, sColor]l, sColor2){ 
if(sText. length==1){ 
// 如 果 只 有 一 个 字符 ,渐变 无 从 谈 起 ,直接 输出 并 返回 
document. write("<font style 一 color: # "十 sColorl 十 " ;全 "十 sSText 十 "一 /font"); 
return; 
} 
//RGB 三 色 分 离 , 分 别 获 取 变 化 的 小 量 Delta 
var fDeltaR 王 Delta(sColorl. substring(0,2),sColor2.substring(0,2),sText.length); 
var fDeltaG 王 Delta(sColorl. substring(2, 4), sColor2. substring(2,4), sText. length) ; 
var {DeltaB= Delta(sColor]l. substring(4,6), sColor2. substring(4,6),sText. length) ; 
var sColorR 王 parseInt("0x" 十 sColorl. substring(0,2)); 
var sColorG 一 parseInt("0x" 十 sColorl.substring(2,4)); 
var sColorB 王 parseInt("0x" 十 sColorl.substring(4,6)); 
for(var i=0;i<sText. length;it++ ){ 
document. write( "< font style= 'color: rgb( "+ Math. round(sColorR ) 十 "," 十 Math. round 





本 -第 3 章 应 用 CSS--- ,43 -- 


(sColorG) 十"," 十 Math. round (sColorB ) 十 "); "二 "十 sText. substring (i, 1 十 1) 十 

"< /font>"); 

/* 每 输出 1 个 字符 ,颜色 的 3 个 分 量 都 有 相应 的 变化 

当 字 符 输出 完成 时 ,正好 由 sColorl 变 成 SColor2 * / 

sColorR 十 三 fDeltaR ; 

sColorG 十 一 fDeltaG:; 

sColorB 十 一 fDeltaB; 

} 

} 
Colorful(" 春 节 (Spring Festival) 是 中 国民 间 最 隆重 最 富有 特色 的 传统 节日 , 它 标志 农历 旧 的 一 
年 结束 和 新 的 一 年 的 开始 。 春 节 一 般 指 除夕 和 正月 初 一 。 但 在 民间 ,传统 意义 上 的 春节 是 指 从 
腊月 初 八 的 腊 祭 或 腊月 二 十 三 或 二 十 四 的 祭 灶 ,一 直到 正月 十 五 ,其 中 以 除夕 和 正月 初 一 为 高 
潮 。 在 春节 期 间 , 我 国 的 汉族 和 很 多 少数 民族 都 要 举行 各 种 活动 以 示 庆 祝 。 这 些 活动 均 以 祭祀 
神 佛 、 祭 竟 祖 先 、 除 旧 布 新 、 迎 禧 接 福 、 祈 求 丰年 为 主要 内 容 。 活 动 丰 富 多 彩 , 带 有 浓郁 的 民族 特 
色 。","FF3300","3366FF"); 
</script> 
</head> 
=body> 
=/body> 
=/html> 





3.4 CSS 应 用 


3.4.1 长 度 单位 和 颜色 单位 


1. 长 度 单位 


长 度 单位 是 Web 网 页 设计 中 最 常用 的 一 个 单位 。 在 CSS 中 ,长 度 是 一 种 度量 尺寸 ,用 
于 宽度 .高度 . 字 号 . 字 和 字母 间距 ,文本 的 缩 排 ` 行 高 ,页 边 距 、 贴 边 ,边框 线 宽 以 及 许 许 多 多 
的 其 他 属性 。 

长 度 单位 一 般 是 一 个 由 两 个 字母 组 成 的 单位 缩写 ,例如 cm、pt、em 等 。 

(1) 绝对 长 度 单位 值 

网 页 定义 上 常常 使 用 的 绝对 长 度 单位 值 有 厘米 (cm) .毫米 (mm) .英寸 (in) 、 磅 (pt) , 派 
卡 (pc) 等 ,如 表 3-1 所 示 。 绝 对 长 度 值 的 使 用 范围 比较 有 限 , 只 有 在 完全 知道 外 部 输出 设备 
的 具体 情况 下 , 才 使 用 绝对 长 度 单位 值 。 


表 3-1 绝对 长 度 单位 























单位 描 述 单位 描 述 
in 英寸 pt 磅 (1 pt 等 于 1/72 英寸 ) 
cm 厘米 pc 12 点 活字 (1 pc 等 于 12 点 ) 
(2) 相对 长 度 值 














每 一 个 浏览 器 都 有 其 默认 的 通用 尺寸 标准 ,这 个 标准 可 以 由 系统 决定 ,也 可 以 由 用 户 按 
照 自己 的 爱好 进行 设置 。 因 此 ,这 个 默认 值 尺 十 往往 是 用 户 觉得 最 适合 的 尺寸 。CSS 支持 
下 列 3 种 长 度 的 相对 单位 : em、ex、px, 见 表 3-2。 
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表 3-2 相对 长 度 单位 














单位 描 述 

em lem 等 于 当前 的 字体 尺寸 

ex 字体 尺寸 的 一 半 

px 像素 (计算 机 屏幕 上 的 一 个 点 ) 
(3) 百分比 


百分比 总 是 相对 于 另 一 个 值 来 说 的 。 那 个 值 可 以 是 长 度 单位 或 是 其 他 的 。 每 一 个 可 以 
使 用 百分比 值 单位 指定 的 属性 同时 也 自 定 义 了 这 个 百分比 值 的 参照 值 。 大 多 数 情况 下 ,这 
个 参照 值 是 此 元 素 本 身 的 字体 大 小 。 要 使 用 百分比 ,首先 应 该 在 所 选择 的 选项 后 面 的 文本 
框 中 写 符号 部 分 ,这 个 符号 可 以 是 “十”( 正 号 ) ,表示 正 长 度 值 ,也 可 以 是 “一 ”( 负 号 ) ,表示 负 
长 度 值 。 如 果 不 写 符号 ,那么 默认 值 是 “十 ”。 

在 符号 后 紧 接 着 是 一 个 数值 ,符号 后 面 可 以 输入 任意 值 ,但 是 由 于 在 某 些 情况 下 ,浏览 
器 不 能 处 理 带 小 数 的 百分数 ,因此 最 好 不 用 带 小 数 的 百分比 。 然 后 再 在 该 选项 的 长 度 单 位 
下 拉 列 表 框 中 选择 “% ?选项 。 


2. 颜色 单位 


定义 颜色 值 最 简单 也 最 直接 的 方法 是 使 用 百分比 值 。 在 这 种 情况 下 , 红 、 绿 、 蓝 颜色 值 
的 等 级 用 百分比 数 来 确定 。 格 式 是 “rgb(R%,G%,B%)”。 使 用 百分比 值 来 指定 颜色 还 有 
一 个 好 处 是 它 能 够 声明 一 组 真正 的 数字 ,不 论 它 的 值 是 多 少 。 

指定 颜色 的 另 一 种 方法 是 使 用 范围 在 0 一 255 之 间 的 整数 来 设置 。 格 式 是 “rgb(128， 
Les128) 

定义 颜色 的 第 三 种 方法 是 使 用 十 六 进 制 数组 定义 颜色 。 这 种 定义 的 方法 对 于 经 常 进行 
程序 设计 的 人 来 说 比较 熟悉 。 定 义 颜 色 时 使 用 3 个 前 后 按 顺 序 排列 的 十 六 进 制 数组 表示 ， 
例如 *# FCOEA8”。 这 种 定义 的 方式 就 是 形 如 #RRGGBB 的 格式 , 即 在 红 、 绿 、 蓝 的 位 置 上 
添上 需要 的 十 六 进 制 值 。 

定义 颜色 最 后 一 种 方法 也 是 最 简单 的 方法 是 指定 颜色 的 名 称 , 也 称 颜色 关键 字 。 在 
CSS 的 颜色 定义 中 ,总 共有 147 种 颜色 关键 字 。 详 细 内 容 可 查阅 CSS 手册 。 


3.4.2 CSS 设置 字体 


与 字体 相关 的 常用 CSS 属性 包括 fontfamily( 字 体 名 称 ) .font-size( 字 体 大 小 ) font- 
style( 字 体 样式 ) ,fontweight( 字 体 粗细 ) font-variant( 小 写字 母 转 为 大 写字 母 ) 。 





1. font-family: 设置 字体 名 称 


计算 机 的 系统 里 都 预 装 了 很 多 字体 ,使 用 font-family 属性 可 以 选择 开发 者 想 要 使 用 的 
字体 。 代 码 如 下 : 
font-family: 字 体 1, 字 体 2,...; 


其 中 ,字体 1 是 优先 选择 的 字体 ,如 果 该 字体 在 用 户 的 系统 中 不 存在 ,那么 浏览 器 就 调 
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用 字体 2 指定 的 字体 ,依次 类 推 。 

2. font-size: 设置 字体 大 小 

该 属性 可 以 设置 字体 的 绝对 大 小 或 者 相对 大 小 。 代 码 如 下 : 

font-size: 绝 对 大 小 或 者 相对 大 小 ; 

绝对 大 小 为 用 户 指定 文字 的 绝对 大 小 ,通常 使 用 pt 或 者 in 作 单位 ,但 是 会 产生 不 同济 
览 器 文字 大 小 不 一 样 的 情况 ,造成 视觉 困扰 ;相对 大 小 一 般 采 用 百分比 的 形式 呈现 ,可 以 使 
页 面 的 文字 大 小 不 管 在 何 种 浏览 器 下 都 能 体现 不 同等 级 。 

3. font-style: 样式 效果 

该 属性 用 来 设置 字体 的 倾 余 效果。 代码 如 下 : 

font-style: normal |italic|oblique; 


其 中 ,normal 为 正常 字体 ,不 倾斜 ,是 默认 值 ;italic 为 倾斜 ;oblique 为 偏 斜体 。 
例 3-14 字体 、 大 小 和 样式 的 设置 ,如 图 3-15 所 示 。 
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图 3-15 字体 、 大 小 和 样式 的 设置 


=!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd" > 
所 html xmlns= "http://www.w3.org/1999/xhtml"> 
一 head 一 
meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> 
二 title 一 用 CSS 属性 设置 字体 二 /title 
一 style type= "text/css"> 
<1— 
.textl { 
font-family:" 华 文 行 楷 ", "楷体 _GB2312"; 
font-size: 20pt; 
color: 井 99CC00; 
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.text2 { 
font-family: "方正 静 董 简体 "，" 宋 体 "; 
font-size: 22px; 
color: #6699FF; 
font-style: italic; 
} 
.text3 { 
fontrfamily: "华文 隶书 "，" 方 正 黄 草 _GBK"; 
font-size: 26px; 
color: #CC99CC; 
} 
-text4 { 
font-family: Webdings, "Times New Roman"; 
font-size: 1.2cm:; 
color: #9DACBF:; 
} 
-> 
</style> 
二 /head 一 
=body> 
=div align= "center"> 
二 p class 二 "text1" 华 文 行 楷 , 楷 体 _GB2312<</p 二 
一 p class 二 "text2" 志 方正 静 蕾 简体 ,宋体 二 /p 二 
二 p class 一 "text3" 一 华文 隶书 ,方正 黄 草 _GBK 一 /p> 
=p class 一 "text4" 二 ABCDEFGHI 一 /p 二 
</div> 
=/body> 
=/html> 


4.font-weight: 设置 字体 粗细 
该 属性 用 来 设置 字体 的 加 粗 情况 。 代 码 如 下 : 


font-weight: normal| bold| bolder | lighter| 100—900; 

值 中 的 前 4 项 是 系统 给 出 的 值 。normal 是 正常 值 , 不 加 粗 ;bold 为 粗 体 ,字体 粗细 约 为 
700;bolder 比 粗 体 更 粗 些 , 约 为 900;lighter 比 默 认 的 字体 细 些 ;100 一 900 数字 越 小 表示 字 
体 越 细 ,数值 越 大 字体 越 粗 。 

S，font-variant: 以 小 型 大 写字 体 或 正常 字体 显示 

该 属性 用 来 将 中 文字 体 转 换 为 较 小 的 中 文字 体 ,将 英文 字体 转换 为 大 写 且 字体 较 小 的 
英文 字体 。 代 码 如 下 : 

font-variant: normal| small-caps; 


其 中 ,normal 为 默认 值 ,是 正常 的 字体 ;small-caps 是 将 小 写 英 文字 体 转 为 大 写 英文 字体 。 
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图 3-16 字体 粗细 和 以 小 型 大 写字 体 示例 扫 一 扫 


一 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
=html> 
<head> 
过 title> 加 粗 、 小 型 字体 过/title 二 
=style> 
<!— 
p{ font-size:18px; } 
p.one{ font-weight:800; } 
p. two{ font-variant: small-caps} 
-> 
</style> 
到 /head 二 


=body> 
<p>little font</p> 
=p class= "one">little font</p> 
=p class= "two">little font=</Pp> 
</body> 
=/html> 


3.4.3 CSS 设置 文本 
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与 文本 相关 的 常用 属性 有 color、 direction, line-height、 letter-spacing、 text-align、 text- 


decoration text-indent ,text-transform ,word-spacing 等 。 
1. color: 颜色 
该 属性 用 于 设置 文字 的 颜色 。 代 码 如 下 : 


color: value; 


上 面 介绍 了 颜色 的 4 种 单位 : 颜色 名 称 、.RGB 值 .RGB 百分比 值 .十 六 进 制 数 , 在 color 


属性 设置 时 ,value 值 可 以 是 这 4 种 单位 中 的 任何 一 种 。 
2. direction: 规定 文本 的 方向 /书写 方向 。 
该 属性 用 于 设置 文本 的 方向 或 书写 方向 。 代 码 如 下 : 


148 0 


direction: ltr | rtl | inherit; 


其 中 ,ltr 表示 文本 从 左 到 右 书 写 ,是 默认 值 ;rtl 表示 文本 从 右 到 左 书写 ;inherit 表示 文 
本 的 值 不 可 继承 。 


3. line-height: 行 高 
该 属性 用 于 设置 行 高 ,控制 行 间 的 距离 。 代 码 如 下 : 
line-height:normal| 比例 | 长 度 单位 | 百分比 ; 


其 中 ,normal 是 默认 值 ;比例 是 指 相对 于 元 素 font-size 设 定 大 小 的 倍数 ;长 度 单位 可 利 
用 绝对 以 及 相对 的 值 来 设置 高 度 ; 百 分 比 是 相对 于 元 素 font-size 的 百分比 。 比 例 、 长 度 单 
位 、 百 分 比 的 值 可 以 为 正 值 ,也 可 以 为 负 值 。 正 值 表示 距离 拉 大 , 负 值 表示 距离 缩短 。 

例 3-16 文本 颜色 , 行 高 .方向 的 设置 ,如 图 3-17 所 示 。 
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图 3-17 文字 颜色 , 行 高 方向 的 设置 示例 





IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

<head> 
二 title> 书 写 方 向 之 /title 二 

=style> 

<!— 

p{ font-size:17px;} 

p.one{ direction: ltr ; } 

p.twof direction:rtl;color: blue; line-height: 0.5em; } 

p. three{ direction:inherit; color: red; line-height: 2em; } 

a 

</style> 
=/head> 

b> 
=p class 
=p class= "two"> Anything one man can imagine, other men can make real. </p> 
=p class= "three" > ANYTHING ONE MAN CAN IMAGINE, OTHER MEN CAN MAKE 
REAL. </p> 

=/body> 

=/html> 


one"> Anything one man can imagine, other men can make real. =</Pp> 


4. textralign: 规定 文本 的 水 平 对 齐 方式 
该 属性 用 于 控制 文字 段落 的 水 平 对 齐 方式 。 代 码 如 下 : 
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text-align: left | right| center |justify; 
其 中 ,left 为 左 对 齐 ;right 为 右 对 齐 ;center 为 居中 对 齐 ;justify 为 两 端 对 齐 。 
5. text-decoration : 文字 装饰 


该 属性 用 于 对 文本 进行 修饰 ,比如 添加 下 画 线 、 项 线 、 删 除 线 , 文 字 闪 烁 等 效果 。 代 码 
如 下 : 


text-decoration: underline| overline | line-through | blink | none; 


其 中 ,none 为 默认 值 ,不 加 任何 效果 ;underline 为 文字 添加 下 画 线 ;overline 为 文字 添 
加 上 顶 线 ;line-through 为 文字 中 间 添 加 删除 线 ;blink 为 文字 添加 闪烁 效果 。 


6. text-transform: 转换 英文 字母 大 小 写 
该 属性 用 于 来 转换 英文 字母 的 大 小 写 形式 。 代 码 如 下 : 


text-transform: capitalize| uppercase|lowercase| none; 


其 中 ,capitalize 将 每 个 英文 单词 的 首 字母 大 写 ; uppercase 将 每 个 英文 字母 转换 为 大 
写 ;lowercase 将 每 个 英文 字母 转换 为 小 写 ;none 为 默认 值 , 不 改变 大 小 写 。 
例 3-17 对 齐 、 大 小 写 转换 \ 文 本 装饰 的 示例 ,如 图 3-18 所 示 。 
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图 3-18 ”对齐 .大 小 写 转换 ,文字 装饰 的 示例 


=!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

html xmlns= "http://www.w3.org/1999/xhtml"> 

=head> 

meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> 

二 title> 设 置 字母 大 小 写 和 文本 修饰 二 /title 二 

style type= "text/css"> 


一 上 一 

.ttl { textrtransform: none;} 

.tt2 { textrtransform: capitalize;} 
.tt3 { textrtransform: uppercase;} 
.tt4 { textrtransform: lowercase;} 
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.tdl { text-decoration:none;} 


.td2 { textrdecoration:line-through; text-align:center;)} 


.td3 { textrdecoration:overline;} 

.td4 { text-decoration:underline;text-align:right;} 

.td5 { textrdecoration:overline underline;} 

一 > 

<=/style> 

=/head> 

=body> 

=table width= "372" border="1" align= "center" cellpadding= "4" cellspacing= "0"> 
< 一 tr bgcolor="#CCCCCC"> 


二 th width 二 "50%" 志 设置 字母 大 小 写 </th> 
二 th width 一 "50%%" 盖 设置 文本 修饰 二 /th> 
</tr> 
<tr style= "line-height:1. 8em; "> 
二 td 之 div class 二 "tt1" 志 原文 : This is a test. 过 /div 二 
二 div class 一 "tt2" 二 首 字母 大 写 : This is a test. 二 /div 
二 div class 一 "tt3" 二 小 写 变 大 写 : This is a test. 三 /div 二 
去 div class 二 "tt4" 志 大写 变 小 写 : This is a test. 志 /div 之 二 /td> 
< 一 td 二 div class 一 "tdl" 二 无 修饰 一 /div 二 

















过 div class= "td2" 过 删除 线 天 /div 二 
一 div class 一 "td3" 二 上 面 线 一 /div 二 
二 div class 一 "td4" 二 下 面 线 一 /div 二 
去 div class 一 "td5" 盖 上 夯 线 和 下 画 线 二 /div 之 二 /td> 
hi 
</table> 


7. word-spacing: 设置 单词 间距 

该 属性 用 于 设置 英文 单词 之 间 的 距离 。 代 码 如 下 : 
word-spacing: normal| 比例 | 长 度 单位 | 百分比 ; 

该 属性 中 的 各 值 与 line-height 属性 的 值 是 一 样 的 。 
8. textrindent: 规定 文本 块 首 行 的 缩 进 

该 属性 用 于 设置 段落 的 首 行 缩 进 。 代 码 如 下 : 


text-indent: value; 


其 中 ,value 的 值 可 以 是 长 度 单位 、 绝 对 单位 或 者 相对 单位 ,相对 的 是 文本 元 素 font-size 
大 小 ;value 值 也 可 以 是 百分比 单位 。value 值 可 有 正 负 , 正 值 表示 向 右 缩 进 , 负 值 表示 向 左 


9，letter-spacing: 设置 字符 间距 
该 属性 用 于 设置 字母 之 间 的 距离 。 代 码 如 下 : 
letter-spacing: normal| 比例 | 长 度 单位 | 百分比 ; 
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该 属性 中 的 各 值 与 line-height 属性 的 值 也 是 一 样 的 。 
例 3-18 字母 间距 、 字 间距 \ 缩 进 的 示例 ,如 图 3-19 所 示 。 
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图 3-19 ”字母 间距 、 字 间距 \ 缩 进 的 示例 


IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 


=html> 
=head> 
二 title 志 字母 间距 、 字 间距 、 缩 进 </title 二 
=style> 
<!— 


p{ letter-spacing:-2pt } 
p.one{ word-spacing:2em;text-indent:50px; letter-spacing:2pt ; } 
-> 
=/style> 
<=/head> 
=body> 
<p>We all know that English is very useful. Many people in the world speak 
English. =</p> 


<p class= "one"> So more and more people in China study it. =/Pp> 
</body> 
=/html> 


3.4.4 CSS 设置 图 像 


通过 CSS 设置 图 像样 式 , 即 通过 CSS 定义 样式 设置 图 片 的 边框 样式 ,边框 颜色 .边框 粗 
细 、 图 文 混 排 等 。 
与 图 片 相关 的 属性 有 border-style border-color border-width 等 。 


1. border-style: 设置 图 像 的 边框 样式 
对 应 的 代码 如 下 : 
border-style: value; 
2. border-color: 设置 图 像 的 边框 颜色 
对 应 的 代码 如 下 : 


border-color: value; 
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3. border-width: 设置 图 像 的 边框 宽度 
对 应 的 代码 如 下 : 
border-width: value; 


例 3-19 通过 CSS 设置 图 像 的 边框 样式 、 边 框 颜 色 和 边框 粗细 。 





=html> 

=head> 

二 title 疡 边框 过 /title 二 

=style> 

<!— 

img. testl{ 
border-style: dotted; /点 画 线 x*/ 
border-color: # FF9900; /* 边框 颜色 x/ 
border-width:6px; /* 边框 粗细 */ 

} 

img. test2{ 
border-style: dashed; /* 虚线 */ 
border-color: #000088; /* 边框 颜色 x/ 
border-width:2px; /* 边框 粗细 */ 

} 

过 

</style> 

=</head> 

=body> 





< 一 img src= "cartoonl] .jpg" class 
img src= "cartoonl] .jpg" class= "test2"> 
=/body> 
=</html> 


本 例 CSS 设置 图 像 示 例 ,如 图 3-20 所 示 。 











图 3-20 CSS 设置 图 像 示 例 


3.4.5 CSS 设置 背景 


背景 是 CSS 的 一 个 重要 组 成 部 分 ,从 生成 的 元 素 上 看 有 两 种 : 颜色 背景 和 图 像 背景 。 
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通过 以 下 的 属性 进行 管理 : background-color、 background-image、background-repeat、 


background-position background-attachment。 
1. background-color: 设置 背景 颜色 
在 网 页 中 ,通常 为 网 页 和 某 些 元 素 添加 背景 颜色 ,以 达到 美化 网 页 的 效果 。 代 码 如 下 : 
background-color:value| transparent; 
其 中 ,value 是 颜色 值 ,可 以 使 用 各 种 颜色 表述 ;transparent 表示 透明 ,也 是 浏览 器 的 默认 值 。 
2. background-image: 设置 元 素 的 背景 图 像 


背景 颜色 可 以 提供 简单 的 网 页 装饰 ,如 果 需 要 更 复杂 的 视觉 效果 , 那 就 需要 用 背景 图 像 
该 属性 用 于 设置 背景 图 像 所 用 的 图 片 。 代 码 如 下 : 





background-image: url(url value) ; 


其 中 ,url(url value) 是 背景 图 像 的 地 址 ,可 以 是 相对 路 径 ,也 可 以 是 绝对 路 径 ,甚至 可 以 
是 网 上 的 图 片 网 址 路 径 。 


3. background-repeat: 设置 是 否 及 如 何 重复 背景 图 像 
该 属性 用 于 设置 背景 图 像 的 排列 方式 ,通常 和 background-image 一 起 使 用 。 代 码 如 下 : 


background-repeat: repeat-x| repeat-y| no-repeat; 


其 中 ,repeat-x 表示 背景 图 像 仅 在 x 方向 ,也 就 是 横向 重复 ; repeat-y 表示 背景 图 像 在 
y 方 向 ,也 就 是 纵向 重复 ;no-repeat 表示 背景 图 像 不 重复 。 当 该 属性 不 被 设置 时 ,表示 背景 
图 像 在 横向 和 纵向 都 重复 。 

例 3-20 重复 背景 设置 的 示例 ,如 图 3-21 所 示 。 


[背景 重复 - Windows Internet Explorer 





s 八国 四 区 

















图 3-21 重复 背景 设置 的 示例 
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一 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 
=head> 
二 title 志 背景 重复 二 /title 二 
=~style> 
Body {padding:0px:; 

margin:0px; 

background-image: url(3301. gif) ; 

background-repeat: repeat-y; 

background-color: # 0066FF; } 
=/style> 

=/head> 

=body> 
=/body> 
=/html> 


4. background-position: 设置 背景 图 像 的 开始 位 置 
该 属性 用 于 设置 背景 图 像 的 开始 位 置 ,也 需要 与 background-image 一 起 使 用 。 代 码 如 下 : 


background-position: valuesl values2; 


其 中 ,valuesl 和 values2 分 别 为 两 个 值 ,用 来 设置 背景 图 像 距 窗口 边 的 距离 ,该 值 可 以 
为 百分数 ,长度 值 ,也 可 以 是 位 置 关键 字 。 百 分 数 指 的 是 背景 图 像 的 起 始 位 置 相对 于 它 的 上 
级 窗口 来 说 的 百分数 ;长 度 值 可 以 是 绝对 单位 也 可 以 是 相对 单位 ;位 置 关 键 字 包括 top left 
上 左 、top center 上 中 ,top right 上 右 、center left 中 左 、center center 正中 、center right 中 
右 、bottom left 下 左 、bottom center 下 中 、bottom right 下 右 。 使 用 这 些 关键 字 可 以 快速 准 
确 地 设置 背景 图 像 的 位 置 。 

例 3-21 背景 图 像 位 置 设置 的 示例 ,如 图 3-22 所 示 。 


背景 的 位 置 x 
C DD file:///D:/ 第 3 章 /3-21.htm 


的 泛 、 最 普遍 、 最 主要 的 形式 。 大 气 固态 | 
水 是 多 种 多 样 的 ， 除 了 美丽 的 雪 祛 涉外 ， 还 包括 能 造成 很 太 危害 
罗兰 | N 


和 攻 人 造成 


雪 片 、 星 形 雪 雪 | 
、 释 、 沙 科 和 年 。 “二 
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图 3-22 背景 图 像 位置 设 置 的 示例 


IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

=head> 

<title> 背 景 的 位 置 二 /title> 

=~style> 

body{ background-image: url(3335.jpg); 
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background-repeat: no-repeat; 

background-position: bottom right; 

background-color: # eeeee8; } 
p{ margin:0px; font-size:14px; 

padding-top: 10px; 

padding-left:6px; padding-right:8px; ) 
</style> 

=/head> 
=body> 

去 p> 一 span> 雪 二 /span 盖 是 大 气 固态 降水 中 的 一 种 最 广泛 .最 普遍 .最 主要 的 形式 .大 气 固态 
降水 是 多 种 多 样 的 ,除了 美丽 的 雪花 以 外 ,还 包括 能 造成 很 大 危害 的 冰雹 ,还 有 我 们 不 经 常见 到 的 雪 
窗 和 冰 粒 .二 /p 二 

去 p 由 于 天 空中 气象 条 件 和 生长 环境 的 差异 ,造成 了 形形色色 的 大 气 固态 降水 .这 些 大 气 固态 降 
水 的 叫 法 因 地 而 异 , 因 人 而 异 ,名 目 繁多 , 极 不 统一 .为 了 方便 起 见 ,国际 水 文 协会 所 属 的 国际 雪 冰 委员 
会 ,在 征求 各 国 专家 意见 的 基础 上 ,于 1949 年 召开 了 一 个 专门 性 的 国际 会 议 ,会 上 通过 了 关于 大 气 固态 
降水 简明 分 类 的 提案 .这 个 简明 分 类 ,把 大 气 固态 降水 分 为 10 种 : 雪 片 . 星 形 雪花 .柱状 雪 唱 、 针 状 雪 
晶 、 多 枝 状 雪 晶 、 轴 状 雪 唱 ,不 规则 雪 晶 、 霞 \ 冰 粒 和 起 .前 面 的 7 种 统称 为 雪 . 二 /p 二 
=/body> 
</html> 


5，background-attachment: 设置 背景 图 像 是 否 固 定 或 者 随 着 页 面 的 其 余部 分 深 动 


该 属性 用 于 设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 ,也 是 需要 与 
background-image 一 起 使 用 。 代 码 如 下 : 


background-attachment: scroll | fixed; 

其 中 ,scroll 表示 背景 图 像 随 着 内 容 的 深 动 而 动 ,为 默认 值 ;fixed 表示 背景 图 像 不 受 滚 
动 影响 ,固定 不 动 。 

6. background: 背景 综合 设置 属性 


从 上 面 的 各 属性 可 以 看 到 ,关于 背景 的 设置 有 很 多 属性 ,为 了 便于 设置 ,CSS 提供 了 一 
个 可 以 同时 设置 背景 相关 内 容 的 属性 background。 代 码 如 下 : 


background: background-attachment background-color background-image background-position 
background-repeat 


该 属性 一 次 设置 了 5 个 背景 属性 。 
例 3-22 ”背景 综合 设置 示例 ,如 图 3-23 所 示 。 





图 3-23 背景 综合 设置 示例 
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一 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
=html> 
<head> 
二 title 背景 综合 设置 </title> 
=style> 
body{ background: url(334.jpg) no-repeat fixed; /* 页 面 大 背景 */} 
div{ 
background:url(../chapter5/bg8. gif) repeat-y 5px 0px; ”/* 左 侧 小 图 标 背 景 */ } 
hl{ fontfamily: 黑 体 ; 
text-decoration: underline; } 
=/style> 
=/head> 
<body> 
<div> 
二 hl 二 银杏 的 优点 </hl> 
1. 叶 色 秀 雅 , 花色 清淡 .二 br 
2, 树 体高 大 ,寿命 绵长 , 树 粗 可 达 4 米 ,寿命 可 达 3000 年 之 多 . 固 长 与 古老 寺庙 相配 伍 ,以 名 山 
大 川 .风景 名 胜 为 伴 .二 br 二 
3, 树干 光洁 , 愈 伤 力 强 ,轻微 的 损伤 很 快 便 可 愈合 .二 br 
4. 发 芽 晚 落叶 早 , 有 利于 早春 和 晚秋 树 下 能 及 时 得 到 和 网 的 阳光 .所 br 
</div> 
=/body> 
=/html> 


3.4.6 ”CSS 设置 超 链接 


在 网 页 上 ,除了 静态 的 图 片 . 颜 色 这 些 美 化 网 页 的 元 素 外 ,使 用 超 链接 动态 交互 效果 ,可 
以 增加 用 户 的 体验 。 在 前 面 的 伪 类 选择 器 中 ,已 经 简单 介绍 了 关于 超 链接 的 4 种 伪 类 状态 ， 
接 下 来 详细 讲解 一 下 。 

1. :link 和 :visited 

:link 可 以 向 未 被 访问 的 链接 添加 样式 ; : visited 向 已 被 访问 的 链接 添加 样式 。 代 码 
如 下 : 

a 或 者 a 的 元 素 名 :link 或 {属性 :属性 值 ;.….) 


其 中 ,a 表 示 所 有 超 链接 ,但 有 时 只 对 部 分 超 链接 使 用 样式 ,此 时 ,可 以 对 该 部 分 超 链接 
进行 类 或 者 ID 名 字 定 义 。 具 有 该 属性 的 元 素 定义 可 以 遵循 派生 选择 器 的 书写 方式 ,比如 对 
于 类 名 称 为 “part1” 中 的 超 链接 进行 样式 设置 时 ,可 以 这 样 写 : 


.partl a:link{color:red;...} 
2. :active 和 :hover 


:active 向 被 激活 的 元 素 添 加 样式 ; : hover 当 鼠 标 悬 浮 在 元 素 上 方 时 ,向 元 素 添 加 
样式 。 
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3.4.7 CSS 设置 鼠标 特效 


在 网 页 上 ,在 操作 鼠标 时 , 当 鼠 标 移动 到 不 同 的 地 方 , 或 者 鼠标 执行 不 同 的 功能 ,或 者 系 
统 处 于 不 同 的 状态 下 ,会 希望 鼠标 显示 出 不 同 的 形状 ,用 来 做 出 相应 的 表示 。 在 CSS 中 , 属 
性 cursor 可 以 用 来 设置 鼠标 的 不 同 显示 样式 。 代 码 如 下 : 
cursor:value; 
设置 在 对 象 上 移动 的 鼠标 指针 采用 何 种 系统 预定 义 的 光标 形状 。 其 值 的 意义 如 表 3-3 
所 示 。 
表 3-3 ”value 值 的 意义 


























属性 值 描 述 属性 值 描 述 
default 默认 值 ,箭头 指针 s-resize 箭头 朝 下 方 
hand 手 形 mrresize 箭头 朝 上 方 
move 移动 erresize 箭头 朝 右 方 
crosshair 精确 定位 “十 ”字形 ne-resize 箭头 朝 右 上 方 
help 帮助 nw-resize 箭头 朝 左 上 方 
wait 等 待 sw-resize 箭头 朝 左下 方 
text 文本 选择 se-resize 箭头 朝 右 下 方 
w-resize 箭头 朝 左 方 














例 3-23 超 链接 、cursor 属性 设置 鼠标 示例 ,如 图 3-24 所 示 。 


— Windows Internet Explorer 
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图 3-24 超 链接 ,cursor 属性 设置 鼠标 示例 


=!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

=html> 

<head> 

二 title 二 超 链 接 过 /title 二 

~style> 


/58 有 


一 ! 一 
body{ 
background: url(bg9. gif); 
margin:0px; padding:0px; 
cursor: pointer;} 
.charall{ 
font-size:12px; 
background-color: #90bcff; } 
.charal td{ 
text-align: center;} 
img{ width:600px; height:150px;} 
a:link{ 
color: #005799; 
text-decoration:none; ) 
a:visited{ 
color: # 000000; 
text-decoration:none; } 
a:hover{ 
color: # FFFFO0; 
text-decoration:underline; 上 
a: active{ color: # CC0000; text-decoration: none;} 
a.help:hover{ cursor:help;} 
-> 
</style> 
</head> 
=body> 
=table align= "center" cellpadding= "1" cellspacing= "0"> 
<tr><td><img src 一 "20120427040247990.jpg” width="3131" height 一 "831" 之 一 /td 
</t> 
=/table> 
< 一 table width= "600px" cellpadding= "2" cellspacing= "2" class="charal" 
align= "center"> 
<tr> 
td 二 a href 一 "# "之 首页 一/a><</td> 
二 td 二 a href=="#" 二 红楼 原著 二 /a 二 </td 二 
二 td 二 a href="#" 红 楼 版 本 二 /a 二 /td 二 
"# "二 红楼 资料 二 /a 二 二 /td 二 
"# "二 红楼 WIKI 一 /a> 天 /td> 
<<td>><<a href 一 "# "之 红楼 论坛 </a><</td> 
二 td 记过 a class 二 "help" href 一 "# "全 帮助 一 /a> 二 /td> 
</u> 
=/table> 
=/body> 
=/html> 





3.4.8 CSS 制作 实用 菜单 


作为 一 个 成 功 的 网 站 ,导航 菜单 是 永远 不 可 缺少 的 ,导航 菜单 的 样式 风格 往往 也 决定 了 
整个 网 站 的 样式 风格 ,本 小 节 介 绍 通过 项 目 列表 制作 导航 栏 的 方法 。 
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列表 可 以 使 相关 的 内 容 以 一 种 整齐 划一 的 方式 排列 显示 。 根 据 列表 排列 方式 的 不 同 ， 
可 以 将 列表 分 为 有 序列 表 、 无 序列 表 、 定 义 列表 3 种 。CSS 列表 属性 允许 放置 .改变 列表 项 
的 标志 ,或 者 将 图 像 作 为 列表 项 标志 。 


1. list-style-type 
该 属性 用 于 设置 列表 项 标签 的 类 型 。 代 码 如 下 : 


list- style-type: disc| circle| square| decimal|lower-roman| upperroman|loweralphal 


upper-alpha| none; 


其 中 ,disc 为 默认 值 , 黑 圆 点 ;circle 为 空心 圆 点 ;square 为 黑色 小 方块 ;decimal 为 数字 
排序 ;lower-roman 为 小 写 罗马 字 排 序 ; upper-roman 为 大 写 罗马 字 排 序 ;lower-alpha 为 小 
写字 母 排序 ;upper-alpha 为 大 写字 母 排序 ;none 为 无 列表 项 的 标签 。 


2. list-style-image 

此 属性 将 图 像 设置 为 列表 项 标签 。 代 码 如 下 : 
list-style-image: url( 图 片 位 置 ); 

图 片 位 置 可 以 为 绝对 地 址 ,也 可 以 为 相对 地 址 。 
3. list-style-position 

此 属性 设置 列表 项 标签 的 放置 位 置 。 代 码 如 下 : 


list-style-position: outside| inside; 


其 中 ,outside 表示 将 列表 项 的 标签 放置 在 列表 左边 框 的 外 侧 , 也 就 是 以 列表 项 内 容 为 
准 对 齐 ;inside 则 表示 以 列表 项 标签 为 准 对 齐 。 


4. list-style 
该 属性 可 以 在 一 个 声明 中 设置 所 有 的 列表 属性 。 代 码 如 下 : 


list-style: list-style-position list-style-type list-style-image; 


例 3-24 利用 项 目 列表 制作 菜单 示例 ,如 图 3-25 所 示 。 





Te 
癌 实用 导 般 x) 癌 实用 导航 


当 CG 口 filey/WDVis/chapter3/ 实 用 某 单 html 闪 三 


My Blog Next Station | contact Me 

















图 3-25 利用 项 目 列表 制作 菜单 示例 扫 一 扫 


=html> 
=head> 


-60 jr---JavaScript+ jQuery Web 交 互 程序 设计 


二 title 二 实用 导航 二 /title 二 
=style> 

二 ! 一 

body{ 

background-color: # ffdee0; 
} 
navigation { 
ont-family: Arial; 


navigation ul { 
ist-style-type: none; 
margin:O0px; 
padding :0px; 


navigation li { 
loat: left; 











navigation li af 
display: block; 
padding:3px 6px 3px 6px; 
text-decoration: none; 
border: 1px solid #711515; 
margin:2px; 


} 


/* 不 显示 项 目 符号 * / 


/* 水 平 显示 各 个 项 目 * / 


/* 区 块 显示 */ 


# navigation li a:link, # navigation li a:visited{ 


background-color: # c11136; 
color: # FFFFFF:; 

} 

# navigation li a:hover{ 
background-color: # 990020; 
color: # fff{00; 

} 

一 之 

</style> 
</head> 

<body> 

=div id= "navigation"> 
=ul> 


/* 鼠标 指针 经 过 时 */ 
/* 改变 背景 色 */ 
/* 改变 文字 颜色 * / 


<li><a href="#">Home</a></li> 
<li><a href="#">My Blog</a></l> 


<li><a hre 





#">>Friends</a>></li> 


<li><a href="#">Next Station</a></li> 
<li><a href="#">Contact Me</a></l> 


< 到 /ul 
</div> 
=/body> 
=/html> 


综合 案例 ,请 扫 一 扫 
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课 后 练习 


一 、 填空 题 

1. CSS 的 语法 结构 仅 由 3 部 分 组 成 : 

2. 添加 CSS 常用 的 方法 有 四 

: 一 般 位 于 HTML 文件 的 头 部 , 即 王 head 过 与 天 /head 过 标签 内 ,并 且 以 
< 一 style 盖 开始 ,以 二 /style 之 结束 ,这 些 定义 的 样式 就 可 以 应 用 到 页 面 中 。 

4. 在 HTML 中 ,设置 文字 的 字体 属性 要 通过 所 font 之 标签 中 的 face 属性 ,而 在 CSS 中 
则 使 用 属性 。 




















二 、 设 计 题 
按 图 3-26 所 示 新 建文 件 名 为 form. htm 的 网 页 ,网 页 背景 色 为 并 CCCCCC, 插 入 表单， 
各 表单 域 的 信息 如 表 3-4 所 示 。 
图 3-26 ”网 页 效果 
表 3-4 各 表单 域 的 信息 
所 表示 信息 类 型 名 称 格式 有效 性 规则 选项 按钮 或 下 拉 菜 单 中 的 值 
姓名 文本 框 name 宽度 10 
性 别 两 个 单 选 按 钮 sex male female 
文化 程度 下 拉 菜 单 degree 小 学 .中 学 ,大 学 














第 4 章 


DOM 和 模 型 


学 习 目 标 

了 解 DOM 的 概念 。 
了 解 DOM 树 的 结构 。 
掌握 DOM 中 元 素 的 操作 。 


4.1 DOM 简介 


DOM 的 全 称 是 document object model, 即 文档 对 象 模型 。 在 浏览 器 中 ,基于 DOM 的 
HTML 分 析 器 将 一 个 页 面 转换 成 一 个 对 象 模型 的 集合 (通常 称 为 DOM 树 ) ,浏览 器 正 是 通 
过 对 这 个 对 象 模型 的 操作 ,来 实现 对 HTML 页 面 的 显示 。 通 过 DOM 接口 ,JavaScript 可 以 
在 任何 时 候 访问 HTML 文档 中 的 任何 一 部 分 数据 ,并 且 可 以 实现 对 HTML 元 素 进行 添 
加 、 移 动 .改变 或 移 除 等 操作 ,因此 ,利用 DOM 接口 可 以 无 限制 地 操作 HTML 页 面 。 

DOM 接口 提供 了 一 种 通过 分 层 对 象 模型 来 访问 HTML 页 面 的 方式 ,这 些 分 层 对 象 模 
型 依据 HTML 的 文档 结构 形成 了 一 棵 节点 树 。 也 就 是 说 ,DOM 强制 使 用 树 模 型 来 访问 
HTML 页 面 中 的 元 素 。 由 于 HTML 本 质 上 就 是 一 种 分 层 结构 , 所 以 这 种 描述 方法 是 相当 
有 效 的 。 

对 于 HTML 页 面 开发 来 说 ,DOM 就 是 一 个 对 象 化 的 HTML 数据 接口 ,一 个 与 语言 无 
关 ,与 平台 无 关 的 标准 接口 规范 。 它 定义 了 HTML 文档 的 逻辑 结构 ,给 出 了 一 种 访问 和 处 
理 HTML 文档 的 方法 。 利 用 DOM ,程序 开发 人 员 可 以 动态 地 创建 文档 ,遍历 文档 结构 , 添 
加 、 修 改 .删除 文档 内 容 ,改变 文档 的 显示 方式 等 。 可 以 这 样 说 ,HTML 文档 代表 的 是 页 面 ， 
而 DOM 则 代表 了 如 何 去 操 作 页 面 。 无 论 是 在 浏览 器 里 还 是 在 浏览 器 外 ,无 论 是 在 服务 器 
端 上 还 是 在 客户 端 ,只 要 有 用 到 HTML 的 地 方 ,就 会 碰 到 对 DOM 的 应 用 。 

DOM 规范 与 Web 世界 的 其 他 标准 一 样 受到 W3C 组 织 的 管理 ,在 其 控制 下 为 不 同 平 
台 和 语言 使 用 DOM 提供 一 致 的 API, W3C 把 DOM 定义 为 一 套 抽象 的 类 而 非 正 式 实现 
DOM。 目 前 ,DOM 由 3 部 分 组 成 ,包括 核心 (core)、HTML 和 XML( 可 扩展 标签 语言 ) 。 
核心 部 分 是 结构 化 文档 比较 底层 对 象 的 集合 ,这 一 部 分 所 定义 的 对 象 已 经 完全 可 以 表达 
出 任何 HTML 和 XML 文档 中 的 数据 了 。HTML 接口 和 XML 接口 两 部 分 则 是 专 为 操 
作 具 体 的 HTML 文档 和 XML 文档 所 提供 的 高 级 接口 ,使 对 这 两 类 文件 的 操作 更 加 
方便 。 
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4.2 DOM 编程 基础 


1. DOM 树 的 结构 


前 面 讲 过 ,DOM 提供 的 访问 文档 信息 的 媒介 是 一 种 分 层 对 象 模型 ,而 这 个 层次 的 结 
构 , 则 是 一 棵 根据 文档 生成 的 节点 树 。 在 对 文档 进行 分 析 之 后 ,不管 这 个 文档 有 多 简单 或 者 
多 复杂 ,其 中 的 信息 都 会 被 转化 成 一 棵 对 象 节点 树 。 在 这 棵 节点 树 中 ,有 一 个 根 节点 即 
document 节点 ,所 有 其 他 的 节点 都 是 根 节点 的 后 代 节 点 。 节 点 树 生成 之 后 ,就 可 以 通过 
DOM 接口 访问 、 修 改 、 添 加 、 删 除 、 创 建树 中 的 节点 和 内 容 。 

DOM 把 文档 表示 为 节点 (node) 对 象 树 。“ 树 ”这 种 结构 在 数据 结构 中 被 定义 为 一 套 互 
相 联系 的 对 象 的 集合 ,或 者 称 为 节点 的 集合 ,其 中 一 个 节点 作为 树 结构 的 根 (root) 。 节 点 被 
冠 以 相应 的 名 称 以 对 应 它们 在 树 里 相对 其 他 节点 的 位 置 。 例 如 , 某 一 节点 的 父 节点 就 是 树 
层次 内 比 它 高 一 级 别 的 节点 (更 靠近 根 节点 ) ,而 其 子 节点 则 比 它 低 一 级 别 ;兄弟 节点 显然 就 
是 树 结构 中 与 它 同 级 的 节点 了 ,不 在 它 的 左边 就 在 它 的 右边 。 


2. DOM 模型 中 的 节点 


节点 的 概念 最 初 来 源 于 计算 机 网 络 , 它 代表 着 网 络 中 的 一 个 连接 点 ,可 以 说 网 络 就 是 由 
节点 构成 的 集合 。DOM 的 情况 很 类 似 , 文 档 可 以 说 也 是 由 节点 构成 的 集合 。 因 此 DOM 的 
逻辑 结构 可 以 用 节点 树 的 形式 进行 表述 。 通 过 浏览 器 的 解析 处 理 ,HTML 文档 中 的 元 素 便 
转化 为 DOM 中 的 节点 对 象 。 

具体 来 讲 ,DOM 节点 树 中 的 节点 有 元 素 节 点 (element node) 文本 节点 (text node) 和 
属性 节点 (attribute node)3 种 不 同 的 类 型 ,下 面具 体 介 绍 。 

(1) 元 素 节 点 

在 HTML 文档 中 ,各 HTML 元 素 如 二 body 二 .一 p 二 .一 ul 二 等 构成 文档 结构 模型 的 
一 个 元 素 对 象 。 在 节点 树 中 ,每 个 元 素 对 象 又 构成 了 一 个 节点 。 元 素 可 以 包含 其 他 的 元 素 ， 
例如 在 下 面 的 “购物 内 容 ” 代 码 中 : 

二 ul id 二 "购买 内 容 " 二 

<<li 盖 牛奶 王 /li 


二 li 一 面包 所 /1 一 
<<li 艺 士 </i 


</ul> 
所 有 的 列表 项 元 素 二 li 都 包含 在 无 序 清单 元 素 二 ul 内 部 。 其 中 ,节点 树 中 二 html 二 元 素 
是 节点 树 的 根 节 点 。 

(2) 文本 节点 


在 节点 树 中 ,元 素 节点 构成 树 的 枝条 ,而 文本 则 构成 树 的 叶子 。 如 果 一 份 文档 完全 由 空 
白 元 素 构成 , 它 将 只 有 一 个 框架 ,本 身 并 不 包含 什么 内 容 。 没 有 内 容 的 文档 是 没有 价值 的 ， 
而 绝 大 多 数 内 容 由 文本 提供 。 在 下 面 语句 中 


p> Welcome to<em> DOM </em> World! </p> 
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包含 “Welcome to”“DOM”World!1?3 个 文本 节点 。 在 HTML 中 ,文本 节点 总 是 包含 在 元 
素 节点 的 内 部 ,但 并 非 所 有 的 元 素 节 点 都 包含 或 直接 包含 文本 节点 ,如 “购物 内 容 ” 中 ， 
二 ul 二 元 素 节点 并 不 包含 任何 文本 节点 ,而 是 包含 着 另外 的 元 素 节 点 ,后 者 包含 着 文本 节 
点 ,所 以 说 ,有 的 元 素 节点 只 是 间接 包含 文本 节点 。 

(3) 属性 节点 


HTML 文档 中 的 元 素 或 多 或 少 都 有 一 些 属性 ,便于 准确 .具体 地 描述 相应 的 元 素 ,便于 
进行 进一步 的 操作 ,例如 下 面 代码 : 
一 hl class="Sample"> Welcome to DOM World! 一 /hl 二 
=ulid="purchases">...</ul> 
这 里 class 二 "Sample" ,id 二 "purchases" 都 属于 属性 节点 。 因 为 所 有 的 属性 都 是 放 在 元 
素 标签 里 ,所 以 属性 节点 总 是 包含 在 元 素 节点 中 。 
注意 : 并 非 所 有 的 元 素 都 包含 属性 ,但 所 有 的 属性 都 被 包含 在 元 素 里 。 
任何 格式 良好 的 HTML 页 面 中 的 每 一 个 元 素 均 有 DOM 中 的 一 个 节点 类 型 与 之 对 
应 。 利 用 DOM 接口 获取 HTML 页 面 对 应 的 DOM 节点 后 ,就 可 以 自由 地 操作 HTML 页 
面 :了 。 
例 4-1 DOM 树 的 结构 。 
=html> 
=<head> 
二 title 二 文档 标题 过 /title> 
=/head> 
=body> 
二 a href 二 "" 志 我 的 链接 二 /a 二 
去 hl> 我 的 标题 二 /hl 二 


=/body> 
=/html> 


用 DOM 树 结构 来 表示 上 面 这 段 代码 , 如 图 4-1 所 示 。 
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图 4-1 DOM 树 结构 


上 面 所 有 的 节点 彼此 间 都 存在 关系 。 
除 文档 节点 之 外 的 每 个 节点 都 有 父 节 点 。 比 如 ,head 和 body 的 父 节点 是 html 节点 ， 
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文本 节点 “我 的 标题 "的 父 节点 是 p 节点 。 

大 部 分 元 素 节点 都 有 子 节点 。 比 如 ,head 节点 有 一 个 子 节点 : title 节点 ;title 节点 也 有 
一 个 子 节点 : 文本 节点 “文档 标题 ”。 

当 节 点 分 享 同一 个 父 节点 时 ,它们 就 是 同辈 ( 同 级 节点 )。 比 如 ,hl 和 a 是 同辈 ,因为 它 
们 的 父 节点 均 是 body 节点 。 

节点 也 可 以 拥有 后 代 , 后 代 指 某 个 节点 的 所 有 子 节点 ,或 者 这 些 子 节点 的 子 节点 ,以 此 
类 推 。 比 如 ,所 有 的 文本 节点 都 是 html 节点 的 后 代 , 而 第 一 个 文本 节点 是 head 节点 的 
后 代 。 

节点 也 可 以 拥有 先辈 。 先 辈 是 某 个 节点 的 父 节 点 ,或 者 父 节点 的 父 节点 ,以 此 类 推 。 比 
如 ,所 有 的 文本 节点 都 可 把 html 节点 作为 先辈 节点 。 


3. document 对 象 


每 个 载 人 浏览 器 的 HTML 页 面 都 会 成 为 document 对 象 ( 即 该 HTML 页 面 对 应 的 
DOM) 。document 对 象 使 人 们 可 以 通过 JavaScript 对 HTML 页 面 中 的 所 有 元 素 进行 访 
问 。document 对 象 是 window 对 象 的 一 部 分 ,可 通过 window. document 属性 对 其 进行 
访问 。 

document 对 象 代 表 一 个 浏览 器 窗口 或 框架 中 显示 的 HTML 文件 。 浏 览 器 在 加 载 
HTML 文档 时 ,为 每 一 个 HTML 文档 创建 相应 的 document 对 象 。document 对 象 是 
window 对 象 的 一 个 属性 ,引用 它 时 ,可 以 省 略 window 前 级。document 拥有 大 量 的 属性 和 
方法 ,结合 了 大 量子 对 象 , 如 图 像 对 象 . 超 链接 对 象 、. 表 单 对 象 等 。 这 些 子 对 象 可 以 控制 
HTML 文档 中 的 对 应 元 素 , 使 人 们 可 以 通过 JavaScript 对 HTML 页 面 中 的 所 有 元 素 进 行 
访问 。 

通过 document 对 象 可 以 使 用 页 面 中 的 任何 元 素 , 也 可 以 添加 新 元 素 、 删 除 存 在 的 元 
素 。document 对 象 的 属性 如 表 4-1 所 示 。 


表 4-1 document 对 象 的 属性 









































属性 名 作 用 
document. title 设置 文档 标题 ,等 价 于 HTML 的 二 title 二 标签 
document. bgColor 设置 页 面 背景 色 
document. fgColor 设置 前 景色 (文本 颜色 ) 
document. linkColor 未 单 击 过 的 链接 颜色 
document. alinkColor 激活 链接 (焦点 在 此 链接 上 ) 的 颜色 
document. vlinkColor 已 单 击 过 的 链接 颜色 
document. URL 设置 URL 属性 从 而 在 同一 窗口 打开 另 一 网 页 
document. fileCreatedDate 文件 建立 日 期 ,只 读 属 性 
document. fileModifiedDate 文件 修改 日 期 ,只 读 属性 
document. fileSize 文件 大 小 ,只 读 属 性 
document. cookie 设置 和 读 出 cookie 
document. charset 设置 字符 集 ,简体 中 文 : GB2312 


-66 0 


在 处 理 文档 时 ,有 几 个 函数 和 属性 可 以 用 来 获取 元 素 信息 ,最 常用 的 函数 如 下 。 
document. write() : 动态 向 页 面 写 入 内 容 。 

document. createElement(tag): 创建 一 个 html 标签 对 象 。 

document. getElementById(id) : 获得 指定 id 值 的 对 象 。 

document. getElementsByName(name) : 获得 指定 name 值 的 对 象 集合 。 


4.3 DOM 节点 操作 


4.3.1 获取 DOM 中 的 元 素 


DOM 中 定义 了 多 种 获取 元 素 节点 的 方法 ,如 getElementByld()、getElementsByName 
() .getElementsByTagName() 和 getElementsByClassName()。 如 果 需 要 获取 文档 中 的 一 
个 特定 的 元 素 节点 ,最 有 效 的 方法 是 getElementById() 。 


1. getElementById () 


该 方法 通过 元 素 节 点 的 id, 可 以 准确 获得 需要 的 元 素 节 点 ,是 比较 简单 快捷 的 方法 。 如 
果 页 面 上 含有 多 个 相同 id 的 元 素 节 点 ,那么 只 返回 第 一 个 元 素 节 点 。 

如 今 , 已 经 出 现 了 如 Prototype、MooTools 等 多 个 JavaScript 库 ,它们 提供 了 更 简便 的 
方法 : $ (id) ,参数 仍然 是 元 素 节 点 的 id。 这 个 方法 可 以 看 作 是 document. getElementById 
() 的 另外 一 种 写法 。 在 后 面 的 章节 中 将 详细 介绍 这 些 JavaScript 库 。 

在 此 先 来 介绍 如 何 通过 getElementById() 获 取 元 素 节点 。 当 需要 操作 HTML 文档 中 
的 某 个 特定 的 元 素 时 ,最 好 给 该 元 素 添 加 一 个 id 属性 ,为 它 指定 一 个 (在 文档 中 ) 唯 一 的 名 
称 , 然 后 就 可 以 用 该 id 属性 的 值 查找 想 要 的 元 素 节 点 。 

例 4-2 getElementById() 方法 的 使 用 。 

=html> 

=head> 


<-title 二 4-2 使 用 getElementById() 一 /title 二 
script type= "text/javascript"> 





function getValue() { 
var x= document. getElementByld("myHeader") 
alert(x.innerHTML) 
} 
=/script> 
<=/head> 
holy 
二 hl id 二 "myHeader" onclick 一 "getValue()" 二 这 是 标题 一 /hl 二 
去 p> 单 击 标题 ,会 提示 出 它 的 值 . 志 /p> 
一 /body 二 
=/html> 


在 例 4-2 中 ,代码 document. getElementByld ("myHeader") 取得 id 属性 的 值 为 
myHeader 的 元 素 , 即 元 素 二 hl ,通过 语句 alert(x. innerHTML) ,实现 单 击 元 素 二 hl 之 显 
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示 出 它 的 内 容 * 这 是 标题 ”。 程 序 运行 效果 如 图 4-2 所 示 。 





站 4-2 使 用 getElementByld| x \ 
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这 是 标 Javascript 提醒 
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图 4-2 通过 getElementById() 获取 元 素 节 点 


2. getElementsByName () 


getElementsByName(name) 方 法 与 getElementById() 方法 相似 ,但 是 它 查 询 元 素 的 
name 属性 ,而 不 是 id 属性 。 因 为 一 个 文档 中 的 name 属性 可 能 不 唯一 (如 HTML 表单 中 
的 单 选 按 钮 通常 具有 相同 的 name 属性 ), 所 以 getElementsByName() 方法 返回 的 是 元 素 
节点 的 数组 ,而 不 是 一 个 元 素 节点 。 然 后 ,可 以 通过 要 获取 节点 的 某 个 属性 来 循环 判断 是 否 
为 需要 的 节点 。 

例 4-3 getElementsByName() 方 法 的 使 用 。 加 

<html> 二 


=head> EE 





=title>4-3getElementsByName()< /title> 
< 一 script type= "text/javascript"> 
function getElements() { 
var x= document. getElementsByName( "mylInput"); 
alert(x. length) ; 
3} 
=/script> 
=/head> 
=body> 
=input name= "mylInput" type= "text" size="20" /全 二 br /> 
input name 一 "myInput" type= "text" size="20" /><br /> 
input name= "mylInput" type= "text" size="20" /><br /> 
=input name= "mylInput" type= "radio" value=""> 
<input name= "mylInput" type= "button"><br /> 
=input type= "button" onclick= "getElements()" 
value 一 "名 为 myInput' 的 元 素 有 多 少 个 ?" /二 
</body><=/html> 


在 例 4-3 中 ,代码 document. getElementsByName("myInput") 获 取 了 name 为 myInput 的 
input 元 素 节 点 数组 ,并 通过 alert(x. length) 语 句 将 该 数组 的 长 度 输出 ,输出 的 结果 为 5。 程 序 
运行 效果 如 图 4-3 所 示 。 


3. getElementsByTagName () 


该 方法 是 通过 元 素 的 标签 名 获取 节点 ,同样 该 方法 也 是 返回 一 个 数组 。 在 获取 元 素 节 
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图 4-3 通过 getElementsByName() 获 取 元 素 节 点 数组 


点 之 前 ,一 般 都 是 知道 元 素 的 类 型 的 ,所 以 使 用 该 方法 比较 简单 。 但 是 缺点 也 是 显而易见 ， 
那 就 是 返回 的 数组 可 能 十 分 庞大 ,这 样 就 会 浪费 很 多 时 间 。 它 不 是 document 对 象 的 专 有 
方法 ,还 可 以 应 用 到 其 他 的 节点 对 象 。 其 语法 格式 如 下 : 

document. getElementsByTagName( "标签 名 称 "); 
或 

document. getElementByld('1d") .getElementsByTagName( "标签 名 称 "); 

获取 节点 数组 时 ,通常 要 把 此 数组 保存 在 一 个 变量 中 ,例如 : 

var x 一 document. getElementsByTagName( "li" ); 


变量 x 就 是 包含 着 页 面 中 所 有 li 元 素 节 点 的 数组 ,可 通过 它们 的 索引 号 来 访问 这 些 1i 
元 素 节 点 ,索引 号 从 0 开始 ,可 以 使 用 数组 的 length 属性 来 循环 遍历 节点 列表 。 
var oLi= document. getElementsByTagName( "li" ); 
for (var i=0;i<x.length;it+ ){ 


// 这 里 可 以 操作 相应 的 元 素 
} 


要 访问 第 三 个 i 元 素 节点 ,可 以 这 么 写 : 





var y= x[2]; 
例 4-4 getElementsByTagName() 方法 的 使 用 。 


=html> 

=head> 

=title>4-4getElementsByTagName()<= /title> 

< 一 script language= "javascript"> 

function searchDOM()1{ 
var oLi 一 document. getElementsByTagName( "li"); 
alert(oLi.length 十 " " 十 oLi[0].tagName + " " 十 oLi[3].childNodes[0].nodeValue); 





} 

=/script> 

=</head> 

二 body onload= "searchDOM()"> 
二 ul 二 客户 端 语言 
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<l>HTML</Ii> 
=1i>JavaScript=</l> 
<l>CSss< /> 

</ul> 

二 ul 二 服务 器 端 语言 
<li>ASP. NET</Ii> 
<li>JSP</li> 
<li>PHP</li> 

</ul> 

=/body> 


以 上 页 面 的 正文 部 分 由 两 个 二 ul 二 组 成 ,分 别 包 含 一 些 项 目 列表 ,每 个 子 项 各 有 一 些 文 
本 内 容 。 通 过 getElementsByTagName("li") 将 所 有 的 二 li 二 标签 取出 ,并 选择 性 地 访问 , 运 
行 结果 如 图 4-4 所 示 。 
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图 4-4 通过 getElementsByTagName() 获 取 元 素 节点 数组 


getElementById() 和 getElementsByTagName() 这 两 种 方法 可 查找 整个 HTML 文档 中 的 
任何 HTML 元 素 。 但 这 两 种 方法 会 忽略 文档 的 结构 ,假如 需要 查找 文档 中 所 有 的 p 元 素 ， 
getElementsByTagName() 会 把 它们 全 部 找到 ,不 管 p 元 素 处 于 文档 中 的 哪个 层次 。 同 时 ， 
getElementById() 方 法 也 会 返回 正确 的 元 素 节点 ,不论 它 被 隐藏 在 文档 结构 中 的 什么 位 置 。 

例如 ,document. getElementsByTagName("p") ;会 返回 文档 中 所 有 p 元 素 的 一 个 节点 
数组 ,而 document. getElementById(maindiv). getElementsByTagName("p") ;会 返回 所 有 
pb 元 素 的 一 个 节点 列表 , 且 这 些 p 元 素 必 须 是 id 为 maindiv 的 元 素 的 后 代 。 


4. getElementsByClassName () 

该 方法 是 通过 元 素 所 使 用 的 样式 类 别名 称 获取 节点 ,该 方法 也 是 返回 一 个 数组 。 其 语 
法 格式 如 下 : 

document. getElementsByClassName(" 类 别名 称 "); 

例 4-5 getElementsByClassName() 方法 的 使 用 。 


=html> 

=head> 

=title>4-5getElementsByClass Name()<= /title> 
=script language= "javascript"> 

function searchDOM()1{ 
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var oLi 一 document. getElementsByClass Name( "ccc"); 
alert(oLi.length 十 " " 十 oLi[0].tagName + " " 十 oLi[2].childNodes[0].nodeValue); 
} 


=</script> 

=/head> 

=body onload= "searchDOM() "> 
二 ul 二 客户 端 语言 


<liclass="cce">HTML< /li> 
二 li 一 JavaScript 一 /1 一 
<liclass="cce">CSS</li> 
</ul> 
二 ul 二 服务 器 端 语言 
<li>ASP. NET</Ii> 
<li>JSP</li> 
<liclass="ccc">PHP</li> 
</ul> 
=/body> 
=</html> 


程序 运行 效果 如 图 4-5 所 示 。 

此 方法 实现 了 想 要 的 功能 , 它 可 以 获取 具有 
指定 class 属性 值 的 对 象 集合 ,但 是 令 人 遗憾 的 是 图 4-5 通过 getElementsByClassName() 
具有 浏览 器 兼容 问题 。 以 上 代码 可 以 在 谷歌 、 火 访问 节点 
狐 和 IE 8 以 上 的 浏览 器 中 完美 运行 ,但 是 IE 8 和 
IE 8 以 下 的 浏览 器 不 支持 此 函数 。 虽然 在 将 来 低 版 本 的 下 浏览 器 退出 市 场 之 后 ,此 函数 
肯定 会 意气 风 发 ,现在 还 是 最 好 不 要 直接 使 用 此 函数 。 
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4.3.2 节点 的 常用 属性 和 方法 


对 于 每 一 个 DOM 节点 node, 都 有 一 系列 的 属性 、 方 法 可 以 使 用 ,这 里 将 常用 的 罗列 在 
表 4-2 中 , 供 读 者 需要 时 查询 。 
表 4-2 node 的 常用 属性 和 方法 



































属性 /方法 类 型 /返回 类 型 附加 说 明 
nodeName String 返回 当前 节点 名 字 
nodeValue String 返回 当前 节点 的 值 . 仅 对 文本 节点 
nodeType Number 返回 与 节点 类 型 相对 应 的 值 
firstChild Node 指向 childNodes 列表 中 的 第 一 个 节点 
lastChild Node 指向 childNodes 列表 中 的 最 后 一 个 节点 
childNodes NodeList 所 有 子 节点 的 列表 ,方法 item(iD 可 以 访问 第 i 十 1 个 节点 
parentNode Node 指向 当前 节点 的 父 节 点 ,如 果 已 是 根 节点 , 则 返回 null 
a 指向 前 一 个 兄弟 节点 ,如 果 该 节点 已 经 是 第 一 个 节点 , 则 
previousSibling Node S 
返回 null 
i 指向 后 一 个 兄弟 节点 ,如 果 该 节点 已 经 是 最 后 一 个 节点 ， 
nextSibling Node 
则 返回 null 
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续 表 
属性 /方法 类 型 /返回 类 型 附加 说 明 
hasChildNodes() Boolean 当 childNodes 包含 一 个 或 多 个 节点 时 ,返回 true 
attributes NameNodeMap | 返回 当前 节点 (标签 ) 属 性 的 列表 , 仅 用 于 元 素 节 点 
appendChild(node) Node 将 node 节点 添加 到 childNodes 的 末尾 
removeChild(node) Node 从 childNodes 中 删除 node 节点 
laceChild de， 

EP Pe 和 Node 将 childNodes 中 的 oldnode 节点 替换 为 newnode 节点 
oldnode) 
men Node 在 childNodes 中 的 refnode 节点 之 前 插入 newnode 节点 
refnode 








4.3.3 检测 节点 类 型 


通过 节点 的 nodeType 属性 可 以 检测 出 节点 的 类 型 。 该 属性 返回 一 个 代表 节点 类 型 的 
整数 值 ,总 共有 12 个 可 取 的 值 ,例如 : 


aler(document. nodeType); 


以 上 代码 的 显示 值 为 9, 标 识 DOCUMENT_NODE 节点 。 然 而 实际 上 ,对 于 大 多 数 情 
况 而 言 ,真正 有 用 的 还 是 之 前 提 到 的 3 种 节点 : 元 素 节点 、 文 本 节点 和 属性 节点 ,它们 的 
nodeType 值 分 别 如 下 。 

(1) 元 素 节点 的 nodeType 值 为 1。 

(2) 属性 节点 的 nodeType 值 为 2。 

(3) 文本 节点 的 nodeType 值 为 3。 

这 就 意味 着 可 以 对 某 种 类 型 的 节点 做 单独 的 处 理 , 这 在 搜索 节点 时 非常 实用 。 





4.3.4 ”利用 父子 兄 关系 查找 节点 


父子 兄 关系 是 DOM 模型 中 节点 之 间 最 重要 的 3 种 关系 。 

在 获取 了 某 个 节点 之 后 ,可 以 通过 父子 关系 ,利用 hasChildNodes() 方 法 和 childNodes 
属性 获取 该 节点 所 包含 的 所 有 子 节点 ,如 例 4-6 所 示 。 

例 4-6 DOM 获取 所 有 子 节点 。 

=html> 

二 head 二 


二 title>4-6 子 节点 遍历 二 /title> 
< 一 script language 一 "javascript" 二 





function myDOMInspector(){ 


var oUl 一 document. getElementById("sonList" ) ; // 获 取 二 ul 二 标签 
var DOMString= ""; 
if(oU!. hasChildNodes(O)){ // 判 断 是 否 有 子 节点 


var oCh=oUIl. childNodes; 
for(var i=0;i<oCh. length;i++) // 逐 一 查找 
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DOMString +=oCh[i].nodeName 十 "\n"; 
} 
alert(DOMString) ; 
} 
</script> 
=/head> 
=body onload= "myDOMInspector() "> 
=ulid="sonList"> 
< 一 li 全 乒乓 球 一 /li 一 
去 li 一 羽毛 球 二 /Ai 一 
<<1i 盖 足球 王 /ii 盖 























去 1 一 篮球 二 /1 全 了 - 3 
一 I 之 橄 槛 球 一 /1 JavaScript 提醒 
</ul> #text 
=/body> u 
=/html> ep 
#text 
这 个 例子 的 函数 中 首先 获取 二 ul 二 标签 , 然 es 
后 利用 hasChildNodes() 判 断 其 是 否 有 子 节点 ， > 
如 果 有 则 利用 childNodes 遍历 它 的 所 有 节点 。 4， 
图 4-6 为 下 浏览 器 和 Chrome 浏览 器 运行 的 结 
果 , 不 仅 显 示 了 5 个 “li” 子 节点 ,同时 连 它们 之 间 确定 
的 空格 也 被 当成 子 节点 计算 了 进来 。 
这 个 问题 一 直 存 在 ,对 于 开发 者 而 言 ,在 编 图 4-6 DOM 获取 所 有 子 节点 


写 DOM 语句 时 应 当 引起 注意 ,具体 的 处 理 方法 
稍 后 讲解 ( 见 例 4-9) 。 

利用 hasChildNodes() 方 法 和 childNodes 属性 ,通过 父 节点 可 以 轻松 找到 子 节点 , 反 过 
来 也 是 一 样 的 。 利 用 parentNode 属性 ,可 以 获得 一 个 节点 的 父 节点 ,如 例 4-7 所 示 。 

例 4-7 DOM 获取 节点 的 父 节点 。 

=html> 


=head> 
=title>parentNode< /title> 


javascript"> 





= script language 
function myDOMInspector() {( 
var myltem= document. getElementByld("myDearball" ) ; 
alert(myltem. parentNode. tag Name); 
} 
=</script> 
=</head> 
二 body onload="myDOMInspector() "> 
二 ul 二 
二 I> 乒乓 球 </li> 
过 li> 羽 毛 球 </li>> 
去 1 足球 二 /1 人 
< 一 li id 一 "myDearball" 过 篮球 一 /1 一 
去 1 一 橄榄 球 二 /1 全 
</u> 
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一 /body> 

=/html> 

在 例 4-7 中 ,“document. getElementById("myDearball")” 语 句 通过 id 方式 找到 语句 
“<<li id 王 "myDearball" 之 篮球 <</1i 盖 ”的 元 素 节 点 <<li ,然后 再 通过 该 节点 的 parentNode 
属性 ,成 功 获得 该 二 li 二 节点 的 父 节点 ,运行 结果 如 图 4-7 所 示 。 
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图 4-7 利用 parentNode 属性 获取 节点 的 父 节点 


由 于 任何 节点 都 拥有 parentNode 属性 ,只 要 搜索 条 件 满足 , 子 节点 可 以 通过 
parentNode 属性 一 直 往 上 搜索 ,直到 body 为 止 ,如 例 4-8 所 示 。 

例 4-8 使 用 parentNode 属性 。 

=html> 

=head> 


=title>parentNode<= /title> 
一 script language= "javascript"> 





function myDOMInspector() { 
var myltem= document. getElementByld( "myDearball" ); 
var parentElm= myltem. parentNode; 
while( parentElm. className ! 一 "ball" &R& parentElm ! 一 document.body) 
parentElm= parentElm. parentNode; // 一 路 往 上 找 
alert(parentElm. tag Name) ; 
} 
=</script> 
=/head> 
body onload= "myDOMInspector()"> 
=div class= "ball"> 
<u> 
过 li> 乒 乓 球 </li> 
二 li 这 羽毛 球 <</li> 
过! 六 足球 </li> 
过 li id 二 "myDearball" 守 篮球 二/li> 
二 1 户 橄 榄 球 二 /li 二 
</ul> 
</div> 
</body> 
=/html> 


在 例 4-8 中 ,依然 是 通过 “document. getElementById("myDearball") ”语句 找到 代码 语 
名 “< 一 li id 二 "myDearball" 放 篮球 二 /li 二 ”的 元 素 节 点 二 1 请 ,然后 再 通过 该 节点 的 
parentNode 属性 ,成 功 获得 该 二 li 二 节点 的 父 节点 ,但 如 果 这 个 父 节 点 的 类 别 样式 不 是 
“ball” 则 通过 循环 语句 while 语句 一 路 往 上 搜索 父 节 点 ,直到 节点 的 CSS 类 名 称 为 
“colorful” 或 者 body 为 止 ,运行 结果 如 图 4-8 所 示 。 
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图 4-8 利用 parentNode 属性 获取 满足 一 定 条 件 的 父 节点 


在 DOM 模型 中 父子 关系 属于 两 个 不 同 层次 之 间 的 关系 ,而 在 同一 个 层 中 常用 到 的 便 
是 兄弟 关系 。DOM 同样 提供 了 一 些 属 性 和 方法 来 处 理 兄 弟 之 间 的 关系 ,简单 的 示例 如 
例 4-9 所 示 。 

例 4-9 通过 nextSibling 和 previousSibling 属性 访问 兄弟 节点 。 

=html> 

=head> 


二 title 志 通过 nextSibling 和 previousSibling 属性 访问 兄弟 节点 二 /title 二 
=script language= "javascript"> 





function nextSib( node){ 
var tempLast 一 node. parentNode. lastChild; 
// 判 断 是 否 是 最 后 一 个 节点 ,如 果 是 则 返回 null 
if(node= = tempLast) 
return null; 
var tempObj= node. nextSibling; 
// 逐 一 搜索 后 面 的 兄弟 节点 ,直到 发 现 元 素 节点 为 目 
while(tempObj. nodeType! =1 &&. tempObj. nextSibling! = null) 
tempObj= tempObj. nextSibling; 
// 三 目 运 算 符 ,如 果 是 元 素 节点 则 返回 节点 本 身 ,否则 返回 null 
return (tempObj. nodeType= =1)?tempObj:null; 
} 
function prevSibCnode){ 
var tempFirst= node. parent Node. firstChild; 
// 判 断 是 否 是 第 一 个 节点 ,如 果 是 则 返回 null 
if(node= = tempFirst) 
return null; 
var tempObj= node. previousSibling; 
// 逐 一 搜索 前 面 的 兄弟 节点 ,直到 发 现 元 素 节点 为 止 
while(tempObj. nodeType! =1 && tempObj. previousSibling! =null) 





tempObj= tempObj. previousSibling ; 
return (tempObj. nodeType= =1)?tempObj:null; 
} 
function myDOMInspector() { 
var myJItem 一 document. getElementByld("myDearball" ) ; 
// 获 取 后 一 个 元 素 兄 弟 节点 
var nextListltem— nextSib(myltem) ; 
// 获 取 前 一 个 元 素 兄弟 节点 
var preListltem= prevSib( myltem) ; 
alert(" 后 一 项 :" 十 ((nextListltem! 二 null)?nextListltem. firstChild. nodeValue:null) 十 " 前 一 
项 :" 十 ((preListltem!= null)?preListltem. firstChild. nodeValue: null) ) ; 
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</script> 
=/head> 
二 body onload= "myDOMInspector() "> 
<ul> 
二 > 乒乓 球 </li> 
去 1 一 羽毛球 二 /1 全 
< 一 li 之 足球 二 /一 
< 一 li id 王 "myDearball" 过 篮球 一 /1 
< 一 li 一 橄榄 球 一 /li 全 


二 /ul 
</body> JavaScript 提醒 
=/html> 
后 一 项 : 柚 懂 球 前 一 项 :足球 
以 上 代码 采用 nextSibling 和 previousSibling 
属性 访问 兄弟 节点 ,在 正 浏览 器 和 Chrome 浏览 





器 中 的 浏览 效果 均 如 图 4-9 所 示 。 
细心 的 读者 可 能 发 现 了 这 样 一 段 代 码 图 4-9 通过 nextSibling 和 previousSibling 
“tempObj. nodeType! 三 1”, 该 代码 中 nodeType 属性 访问 兄弟 节点 
属性 对 节点 类 型 进行 判断 ,如 果 节 点 类 型 不 为 
1, 则 代表 着 该 节点 不 是 元 素 节点 ,然后 接着 搜索 ,直到 发 现 元 素 节 点 为 止 。 如 此 ,很 多 浏 
览 器 中 的 空格 节点 问题 就 得 到 了 很 好 的 解决 。 前 面 例 4-6 中 的 问题 便 迎 刃 而 解 。 修 改 后 
的 程序 如 例 4-10 所 示 。 
例 4-10 通过 nodeType 属性 消除 空格 节点 的 影响 。 
=html> 
=head> 


< 到 title>4-10 消除 空格 节点 过 /title 二 
< 一 script language= "javascript"> 





function myDOMInspector(){ 
var oUl|= document. getElementByld( "sonList"); 
var DOMString 一 ""; 
让 (oU1. hasChildNodes()){ 
var oCh 一 oUl.childNodes; 
for(var i=0;i<oCh. length;i++) 
if (oCh[i] .nodeType==1) // 判 断 节点 是 否 为 元 素 节点 
DOMString +=oCh[i].nodeName + "\n"; 
} 
alert(DOMString) ; 
} 
=</script> 
=/head> 
二 body onload="myDOMInspector() "> 
=ulid="sonList"> 
过 li> 乒 乓 球 </li> 
二 1 这 羽毛 球 </li> 
二 1 这 足球 </l> 
<<1i 盖 篮球 < 人 ii 
去 li 一 橄 槛 球 王 /Ai 一 
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一 /ul 
一 /body> 
</html> 


最 终 浏 览 效 果 如 图 4-10 所 示 。 
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图 4-10 通过 nodeType 属性 消除 空格 节点 的 影响 


4.3.5 设置 节点 属性 


在 找到 需要 的 节点 之 后 通常 希望 对 其 属性 做 相应 的 设置 ,DOM 定义 了 两 个 便捷 的 方 
法 来 查询 和 设置 节点 的 属性 , 即 getAttribute() 方 法 和 setAttribute() 方 法 。 

getAttribute( ) 方 法 是 一 个 函数 , 它 只 有 一 个 参数 即 要 查询 的 属性 名 称 。 需 要 注意 的 是 
该 方法 不 能 通过 document 对 象 调用 ,只 能 通过 一 个 元 素 节点 对 象 来 调用 。 下 面 的 例 4-11 
用 来 获取 图 片 的 title 属性 。 

例 4-11 用 getAttribute() 方 法 获取 节点 的 属性 。 

=html> 


=head> 
=title>4-llgetAttribute()< /title> 


i 


script language= "javascript"> 





function myDOMInspector() { 
// 获 取 图 片 
var myImg= document. getElementsByTagName(C"img")[0] ; 
// 获 取 图 片 的 title 属性 
alert(myImg. getAttribute( "title") ) ; 
} 
=/script> 
=/head> 
二 body onload= "myDOMInspector() "> 
二 img src 二 " 莫 高 窗 .jpg"”title 二 " 莫 高 窗 " width 二 "600px" height 二 "400px" /全 
</body> 
=/html> 


以 上 代码 首先 通过 getElementsByTagName() 方 法 在 DOM 中 将 图 片 找 到 ,然后 再 利 
用 getAttribute() 方 法 读 取 图 片 的 title 属性 ,运行 结果 如 图 4-11 所 示 。 

除了 获取 属性 外 ,另外 一 个 方法 setAttribute() 可 以 修改 节点 的 相关 属性 。 该 方法 接收 
两 个 参数 ,第 一 个 参数 为 属性 的 名 称 ,第 二 个 参数 为 要 修改 的 值 ,如 例 4-12 所 示 。 
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图 4-11 用 getAttribute() 方 法 获取 节点 的 属性 


例 4-12 用 setAttribute() 方 法 设置 节点 的 属性 。 


=html> 
=head> 


=title>4-12 setAttribute()= /title> 





=script language= "javascript"> 
function changePic(){ 
// 获 取 图 片 
var myImg= document. getElementsByTag Name( "img")[0]; 
// 设 置 图 片 src 和 title 属性 
mylmg. setAttribute("sre", "沙漠 .jpg"); 
myImg. setAttribute( "title", "沙漠 "); 
mylmg. setAttribute("width", "300px"); 
mylmg. setAttribute("height", "200px"); 








} 

=/script> 

</head> 

body> 

二 img src 一 " 莫 高 窜 .jpg" title 一 " 莫 高 帘 ”width 一 "600px"” height 一 "400px" 
onclick="changePic()" /> 

=/body> 

=/html> 


以 上 代码 为 二 img 二 标签 增添 了 onclick 函数 , 单 击 图 片 后 再 利用 setAttribute() 方 法 来 
替换 图 片 的 srcvtitle ,width .height 属性 ,从 而 实现 了 单 击 切换 的 效果 ,图 4-12(a) 是 单 击 前 
的 效果 ,图 4-12(b) 是 单 击 后 的 效果 。 

这 种 单 击 图 片 直接 更 换 的 效果 也 是 网 络 相 册 上 经 常 使 用 的 ,通过 setAttribute() 方 法 更 
新 元 素 的 各 种 属性 来 获得 友好 的 用 户 体验 。 





4.3.6 创建 和 添加 节点 


除了 查找 节点 并 处 理 节点 的 属性 外 ,DOM 同样 提供 了 很 多 便捷 的 方法 来 管理 节点 , 主 


一 口 


| 


DD 4-12 setAttribute0 \ DD 4-12 setAttribute0 x 


€ 会 CC | file///D:/js-chapter4/4-1: 窜 = 3 G | file///D:/js-chapter4/4-1:7? 











(a) 单 击 前 (b) 单 击 后 
图 4-12 用 setAttribute() 方 法 设置 节点 的 属性 


要 包括 创建 .删除 .替换 和 插入 等 操作 。 

创建 节点 的 过 程 在 DOM 中 比较 规范 ,而且 对 于 不 同类 型 的 节点 方法 还 略 有 区 别 。 例 
如 ,创建 元 素 节点 采用 createElement() ,创建 文本 节点 采用 createTextNode() ,创建 文档 碎 
片 节点 采用 createDocumentFragment() ,等 等 。 假 设 有 如 下 HTML 文档 : 

=html> 

=head> 

二 title 二 创建 新 节点 过 /title 二 

</head> 

=body> 

二 /body 二 

=/html> 


希望 在 二 body 之 中 动态 地 添加 如 下 代码 

去 p> 这 是 一 段 感人 的 故事 一 /p> 

便 可 以 利用 刚才 提 到 的 两 个 方法 来 完成 ,首先 利用 createElement() 创 建 二 p 过 元素, 代 
码 如 下 : 

var oP= document. createElement("p"); 

利用 createTextNode() 方 法 创建 文本 节点 ,并 利用 appendChild() 方 法 将 其 添加 到 oP 
节点 的 childNodes 列表 的 最 后 ,代码 如 下 : 


var oText 一 document. createTextNode( "添加 一 个 段落 "); 

oP.appendChildCoText) ; 

最 后 再 将 已 经 包含 了 文本 节点 的 元 素 二 p 之 节点 添加 到 二 body 之 中 ,仍然 采用 
appendChild() 方 法 ,代码 如 下 : 


document.body.appendChildCoP) ; 


这 样 便 完 成 了 一 body 二 中 二 p 二 元 素 的 创建 ,如 果 希 望 考察 appendChild() 方 法 添加 对 
象 的 位 置 ,可 以 在 二 body 二 中 预先 设置 一 段 文本 ,就 会 发 现 appendChild() 方 法 添加 的 位 置 
永远 是 在 节点 childNodes 列表 的 尾部 。 完 整 代码 如 例 4-13 所 示 。 
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例 4-13 DOM 创建 并 添加 新 节点 。 


一 html 二 
一 head 二 
<title>4-13 创建 新 节点 二 /title> 


javascript"> 





=script language 
function createP(){ 

var OP 一 document. createElement("p"); 

var oText 一 document. createTextNode(" 添 加 一 个 段落 "); 

oP. appendChild(oText); 

document. body.appendChildCoP) ; 
} 
=/script> 
</head> 
=body onload= "createP() "> 
所 p 二 事先 写 一 行文 字 在 这 里 ,测试 appendChild() 方 法 的 添加 位 置 一 /p> 
二 p 二 事先 写 一 行文 字 在 这 里 ,测试 appendChild() 方 法 的 添加 位 置 1 一 /p 二 
一 p 二 事先 写 一 行文 字 在 这 里 ,测试 appendChild() 方 法 的 添加 位 置 3 一 /p 二 
=</body> 
=/html> 


代码 运行 结果 如 图 4-13 所 示 ,二 p 二 标签 被 成 功 地 添加 到 了 二 body 二 的 末尾 。 
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事先 写 一 行文 字 在 这 里 ， 测 试 appendChild() 方 法 的 添加 位 置 1 
事先 写 一 行文 字 在 这 里 ， 测 试 appendChild() 方 法 的 添加 位 置 3 
添加 一 个 段落 





图 4-13 DOM 创建 并 添加 新 节点 


4.3.7 ”删除 节点 


DOM 能 够 添加 节点 自然 也 能 够 删除 节点 。 删 除 节点 是 通过 父 节 点 的 removeChild() 
方法 来 完成 的 ,通常 的 方法 是 找到 要 删除 的 节点 ,然后 利用 parentNode 属性 找到 父 节 点 , 然 
后 将 其 删除 ,如 例 4-14 所 示 。 

例 4-14 DOM 删除 节点 。 

<html> 

=head> 

二 title 之 4-14 删除 节点 二 /title 二 


一 script language= "javascript"> 
function deleteP(){ 





var oP= document. getElementsByTagName("p")[0] ; 

oP. parentNode. removeChildCoP) ; // 删 除 节点 
} 
</script> 
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=</head> 

=body> 

一 pb onclick 一 "deleteP() "过 这 行文 字 你 一 会 儿 就 看 不 到 了 一 /p> 
去 p> 这 行文 字 一 直 在 王 /p> 

=/body> 

=/html> 


以 上 代码 证 孝 全 入 送行 之 后 训 虹 委 中 陛 和 到 网 生 类 5 介 内 要 在 党 一 有 文子 七 蛙 击 ， 
行文 字 就 没 了 ,其 原因 就 是 在 第 一 行文 字 上 添加 了 行为 onclick 二 "deleteP()"”。 


deleteP() 函数 通过 代码 “var oP 二 document. getElementsByTagName("p")[0];” 找 到 第 一 


个 段 
行文 


4.3. 


法 来 完 


落 标 签 二 p 记 , 即 第 一 行文 字 ; 通 过 代码 “oP. parentNode. removeChildCoP) ;” 删 除 第 一 
字 。 
图 4-14(a) 和 图 4-14(b) 是 第 一 行文 字 单 击 前 后 的 对 比 。 
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这 行文 字 你 一 会 儿 就 看 不 到 了 这 行文 字 一 直 在 
这 行文 字 一 直 在 





(a) 单 击 前 (b) 单 击 后 
图 4-14 DOM 删除 节点 


8 ”替换 节点 


有 时 不 光 是 添加 和 删除 ,而 是 需要 替换 页 面 中 的 某 个 元 素 ,DOM 提供 了 replaceChild() 方 
成 这 项 任务 。 该 方法 同样 是 针对 要 替换 节点 的 父 节点 来 操作 的 ,如 例 4-15 所 示 。 

例 4-15 通过 replaceChild() 方 法 替换 节点 。 

=html> 


=head> 
二 title 二 4-15 替换 节点 二 /title 二 





一 script language= "javascript"> 
function replaceP(){ 
var oO0ldP= document. getElementsByTagName("p")[0]; 
var oONewP= document. createElement("p"); 
var oText 一 document. createTextNode( "我 来 替代 原先 的 文字 ") 
oNewP.appendChild(oText) ; 
oOldP. parentNode. replaceChild(oNewP, oO0ldP); // 蔡 换 节点 
} 
=/script> 
=/head> 
=body onload= "replaceP() "> 
二 p 二 这 行文 字 被 替换 了 二 /p 二 
=/body> 
</html> 


以 上 代码 首先 创建 了 一 个 新 的 二 p 二 节点 ,然后 利用 oOldP 父 节 点 的 replaceChild() 方 
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法 将 oOldP 替换 成 了 oNewP, 运 行 结果 如 图 4-15 所 示 。 
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我 来 普 代 原先 的 文字 





图 4-15 通过 replaceChild() 方 法 替换 节点 


4.3.9 在 特定 节点 前 插入 节点 


例 4-13 中 新 创建 的 元 素 二 p 二 插入 到 二 body 二 子 节点 列表 的 末尾 ,如 果 希 望 这 个 节点 
能 够 插入 到 已 知 节点 之 前 , 则 可 以 采用 insertBefore() 方 法 。 与 replaceChild() 方 法 一 样 ,该 
方法 同样 接收 两 个 参数 ,一 个 参数 是 新 节点 , 另 一 个 参数 是 目标 节点 ,如 例 4-16 所 示 。 

例 4-16 在 已 知 节 点 前 插入 新 节点 。 


=html> 

<head> 

过 title>4-16 在 已 知 节点 前 插入 节点 过 /title 二 

=script language= "javascript"> 

function insertP(){ 
var oOldP= document. getElementsByTag Name("p")[0]; 
var oONewP= document. createElement("p") ; // 新 建 节点 
var oText 二 document. createTextNode(" 在 已 知 节点 前 插入 新 节点 "); 
oNewP.appendChildCoText) ; 
oOldP. parentNode. insertBefore(oNewP, oO0ldP); // 插 入 节点 

} 

</script> 

=/head> 

=body onload= "insertP()"> 

二 p 二 插入 到 这 行文 字 之 前 二 /p 二 

=/body> 站 416 下 已 和 节点 产生 x \ 
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以 上 代码 同样 是 新 建 一 个 元 素 节 点 ,然后 利用 | 在 E 知 ?点 前 括 和 新 和 点 
insertBefore() 方 法 将 节点 插入 到 目标 节点 之 前 , 运 【02 
行 结果 如 图 4-16 所 示 。 图 4-16 在 已 知 节点 前 搬入 新 节点 

通常 将 节点 添加 到 实际 页 面 中 时 ,页 面 就 会 立 
即 更 新 并 反映 出 这 个 变化 。 对 于 少量 的 更 新 前 面 介 绍 的 方法 是 非常 实用 的 ,而 一 旦 添加 的 
节点 非常 多 时 ,页 面 执行 的 效率 就 会 很 低 。 通 常 解决 方法 是 创建 一 个 文档 碎片 ,把 新 的 节点 
先 添加 到 该 碎片 上 ,然后 再 一 次 添加 到 实际 的 页 面 中 ,如 例 4-17 所 示 。 

例 4-17 用 DOM 的 文档 碎片 提高 页 面 执行 效率 。 

=html> 


<head> 
二 title 之 4-17 文档 碎片 二 /title 二 
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二 style type= "text/css"> 

P { padding:2px; margin:0px; } 
=/style> 

< 一 script language= "javascript"> 


function insertPs(){ 


var aColors 一 ["red","green","blue","magenta","yellow","chocolate","black","aquamarine"," 


azure"," brown"," bronze"," deeppink "," aliceblue gray "," 


purple"] ; 


lime"," fuchsia"," brass 


copper", "coral”"," eldepat, 


i "orchid", i "plum", "quartz", 
var OFragment 一 document. createDocumentFragment(); 
for(var i 一 0;i 一 aColors.length;i+r+){ 

var oP= document. createElement("p"); 
var oText= document. createTextNode(aColors[1] ); 
oP. appendChild(oText) ; 
oFragment. appendChildCoP) ; 
} 
document. body. appendChildCoFragment) ; 

} 

<=/script> 

</head> 

body onload= "insertPs()"> 

=</body> 

</html> 


以 上 代码 的 运行 结果 如 图 4-17 所 示 ,执行 的 效率 非常 高 。 
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图 4-17 用 DOM 的 文档 碎片 提高 页 面 执行 效率 


4.3.10 在 特定 节点 后 插入 节点 


DOM 提供 的 插入 方法 中 只 能 往 目标 元 素 之 前 用 insertBefore() 插 入 新 的 元 素 , 或 者 是 
利用 appendChild() 方 法 在 父 元 素 的 childNodes 末尾 添加 新 元 素 。 实 际 中 往往 需要 往 某 个 
特定 元 素 之 后 插入 新 的 元 素 , 而 DOM 本 身 没 有 提供 insertAfter() 方 法 。 但 是 完全 可 以 利 
用 现 有 的 知识 自行 编写 ,代码 如 下 : 


function insertAfter(newElement，targetElement)1{ 


var oOParent 一 targetElement. parentNode; // 首 先 找 到 目标 元 素 的 父 元 素 
if(oParent. lastChild= = targetElement) // 如 果 目 标 元 素 已 经 是 最 后 一 个 子 元 素 
oParent. appendChildCnewElement) ; /* 则 直接 用 appendChild() 加 到 子 元 素 列表 的 最 后 */ 


else // 否 则 用 insertBefore() 插 入 目标 元 素 的 下 一 个 兄弟 元 素 之 前 
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oParent. insertBefore(newElement, targetElement. nextSibling) ; 


} 


以 上 函数 的 每 一 行 代码 都 有 注释 ,思路 十 分 清晰 , 即 首 先 判 断 目标 节点 是 否 是 其 父 节点 
的 最 后 一 个 子 节点 ,如 果 是 则 直接 用 appendChild() 方 法 ,否则 利用 nextSibling 找到 下 一 个 
兄弟 节点 ,然后 再 用 insertBefore() 。 完 整 代 码 如 例 4-18 所 示 。 

例 4-18 在 特定 节点 后 插入 节点 。 

<html> 

=head> 

过 title 二 例 4-18 在 特定 节点 后 插入 节点 二/title 二 


=script language= "javascript"> 





function insertAfter(newElement，targetElement)1{ 
var oParent= targetElement. parentNode; 
if(oParent. lastChild= = targetElement) 
oParent. appendChild( newElement) ; 
else 
oParent. insertBefore(newElement, targetElement. nextSibling) ; 
} 
function insertP(){ 
var oOldP 一 document. getElementByld( "pTarget" ) ; 
var oONewP= document. createElement("p"); // 新 建 节点 
var oText 二 document. createTextNode(" 我 要 插入 段落 Pl 和 P2 之 间 "); 
oNewP.appendChildCoText) ; 


insertAfter(oNewP,oOldP) ; // 插 入 节点 
} 
</script> 
</head> 


=body onload= "insert PO) "> 
二 p id 二 "pTarget" 志 我 是 段落 P1 一 /p> 
二 p 志 我 是 段落 P2</p 二 
=/body><=/html> 


以 上 代码 的 运行 结果 如 图 4-18 所 示 , 可 以 看 到 新 建 的 元 素 二 p 二 成 功 地 插入 了 目标 元 
素 之 后 ,十 分 实用 。 
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我 是 段落 P1 
我 要 插入 到 段落 Pl 和 P2 之 间 
我 是 段落 P2 


图 4-18 在 特定 节点 后 插入 节点 
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4.4 使 用 非 标 准 DOM innerHTML 属性 





innerHTML 属性 表示 某 个 标签 之 间 的 所 有 内 容 , 包 括 代码 本 身 。 该 属性 可 以 读 取 , 同 
时 可 以 设置 。innerHTML 属性 虽然 不 属于 标准 DOM 方法 ,但 由 于 使 用 方便 ,也 得 到 了 日 
前 主流 浏览 器 的 支持 。 

例 4-19 使 用 标签 的 innerHTML 属性 。 





=html> 
=head> 
=title>innerHTML< /title> 
一 "javascript" 之 
function myDOMInnerHTMLO)! 
var myDiv= document. getElementByld("myTest"); 
alert(myDiv.innerHTML) ; // 直 接 显示 innerHTML 的 内 容 
// 修 改 innerHTML, 可 直接 添加 代码 
myDiv.innerHTML 一 "一 img src 一 蜡 高 窜 .jpg'title 一 览 高 帘 一 "; 
} 
=/script> 
二 /head 二 
二 body onload= 王 "myDOMInnerHTML() "> 
一 div id 一 "myTest" 二 
所 span 盖 初 识 内容 1 二 /span 二 
二 p 二 初 识 内 容 2<</p> 
</div> 
=/body>=/html> 





=script language 


以 上 代码 首先 读 取 文 档 中 二 div 二 块 的 innerHTML 属性 ,可 以 看 到 该 属性 包含 了 所 有 
二 div 二 标签 中 的 内 容 , 包 括 代码 ,如 图 4-19(a) 所 示 。 在 读 取 该 属性 的 内 容 后 ,以 上 代码 又 
直接 修改 了 二 div 二 块 的 innerHTML 属性 ,将 其 替换 成 一 幅 图 片 ,运行 结果 如 图 4-19(b) 


所 示 。 
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<p> 初 识 内 容 2</p> 











(a) 读 取 属性 (b) 替换 成 图 片 
图 4-19 使 用 标签 的 innerHTML 属性 
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4.5 DOM 与 CSS 


CSS 是 通过 标签 ,类 型 ID 等 来 设置 元 素 的 样式 风格 的 ,DOM 则 是 通过 HTML 的 框 
架 来 实现 各 个 节点 操作 的 。 单 从 对 HTML 页 眉 的 结构 分 析 来 看 ,两 者 是 完全 相同 的 。 本 
节 再 次 回顾 标准 Web 三 位 一 体 的 页 面 结构 ,并 简单 介绍 className 的 运用 。 





4.5.1 三 位 一 体 的 页 面 


在 前 面 曾经 提 到 过 结构 、 表 现行 为 三 者 的 分 离 , 如 今 对 JavaScript\CSS 和 DOM 有 了 
新 的 认识 ,再 重新 审视 以 下 这 种 思路 ,会 觉得 更 加 清晰 。 

网 页 的 结构 (structure) 层 由 HTML 或 者 XHTML 之 类 的 标签 语言 负责 创建 ,标签 
(tag) 对 页 面 各 个 部 分 的 含义 做 出 描述 。 例 如 ,二 ul 二 标签 表示 这 是 一 个 无 序 的 项 目 列表 ， 
代码 如 下 : 

<u> 

<! 访 足球 </li> 

二 l 户 篮球 <</li> 

去 1 全 羽毛球 二/ 全 
</ul> 

页 面 的 表现 (presentation) 层 由 CSS 来 创建 , 即 如 何 显示 这 些 内 容 。 例 如 ,采用 蓝 色 , 字 
体 为 Arial, 粗 体 显 示 , 代 码 如 下 : 

.ysULl1{ 

color: #0000FF; 
font-family: Arial; 
font-weight:bold;  } 

行为 (behavior) 层 负责 内 容 应 该 如 何 对 事件 做 出 反应 ,这 正 是 JavaScript 和 DOM 所 完 
成 的 ,例如 当 用 户 单 击 项 目 列表 时 ,弹出 对 话 框 ,代码 如 下 : 


function check() ( 
var oOMy= document. getElementsByTag Name( "ul")[0]; 
alert(" 你 单 击 了 这 个 项 目 列表 "); } 


<ul onclickk= "check()" class="ysUL1"> 
二 l 户 足球 /li> 
二 ! 芒 篮球 二/li> 
二 li> 羽 毛 球 </li> 
</ul> 
网 页 的 表现 层 和 行为 层 总 是 存在 的 ,即使 没有 明确 地 给 出 具体 的 定义 和 指令 。 因 为 
Web 浏览 器 会 把 它 的 默认 样式 和 默认 事件 加 载 到 网 页 的 结构 层 上 。 例 如 ,浏览 器 会 在 呈现 
文本 的 地 方 弹出 title 属性 的 提示 框 ,等 等 。 
当然 这 3 种 技术 也 有 一 定 的 重 释 ,例如 用 DOM 来 改变 页 面 的 结构 层 、createElement() 
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等 。CSS 中 也 有 hover 这 样 的 伪 属 性 来 控制 鼠标 指针 滑 过 某 个 元 素 时 的 样式 。 
到 此 可 以 发 现 结构 .样式 .行为 对 于 网 站 而 言 是 缺 一 不 可 的 。 


4.5.2 使 用 className 属性 


前 面 提 到 的 DOM 都 是 与 结构 层 打交道 的 ,例如 ,查找 节点 、 添 加 节点 等 ,而 DOM 还 有 
一 个 非常 实用 的 className 属性 ,可 以 修改 一 个 节点 的 CSS 类 别 , 如 例 4-20 所 示 。 


例 4-20 用 className 属性 修改 节点 的 CSS 类 别 。 


=html> 
=head> 
一 title 例 4-20className 属性 二 /title 二 
二 style type= "text/css"> 
.ysUL1{ 
color: # 0000FF; 
font-family: Arial; 
font-weight: bold; 
} 
.ysUL21{ 
color: # FFO000; 


font-family: Georgia, "Times New Roman", Times, serif; 


} 
</style> 
一 script language= "javascript"> 
function check(){ 
var oOMy= document. getElementsByTagName( "ul")[0]; 
oMy.className= "ysUL2"; } 
</script> 
=/head> 
<body> 
< 所 ul onclick="check()" class="ysUL1"> 
<! 户 是 球 </li> 
二 li 六 篮球 <</li> 
<<1i 一 羽毛 球 二 /li 一 
</ul> 
</body><=/html> 


例 4-20 中 , 当 浏 览 网 页 并 单 击 列表 时 ,会 发 现 列表 的 
样式 发 生 了 改变 ,其 实 就 是 将 二 ul 二 标签 的 className 属 
性 进行 了 修改 ,用 ysUL2 覆盖 了 ysUL1, 可 以 看 到 项 目 列 
表 的 颜色 .字体 和 粗细 均 发 生 了 变化 ,如 图 4-20 所 示 。 

从 例 4-20 中 也 很 清晰 地 看 到 ,修改 className 属性 
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。 足 球 
。 篮球 
。 羽 毛 球 





图 4-20 用 className 属性 修改 
节点 的 CSS 类 别 


是 对 CSS 样式 进行 替换 ,而 不 是 添加 ,但 很 多 时 候 并 不 希望 将 原 有 的 CSS 样式 覆盖 ,这 时 完 
全 可 以 采用 追加 的 方式 ,前 提 是 保证 追加 的 CSS 类 别 中 的 各 个 属性 与 原先 的 属性 不 重复 ， 


代码 如 下 : 


oMy.className 十 一 "myUL2"; 


和 -第 4 章 “DOM 模 型 -87 --: 


例 4-21 追加 CSS 类别。 


=html> 
<head> 
< 一 title 之 4-21 追加 CSS 类 别 二 /title 二 
style type= "text/css"> 
.ysUL1{ 
color: # 0000FF; 
font-family: Arial; 





font-weight: bold; 
} 
.ysUL2{ 
text-decoration: underline; 
} 
=/style> 
=script language= "javascript"> 
function check(){ 
var oOMy= document. getElementsByTagName( "ul")[0]; 
oMy.className +=" ysUL2"; // 追 加 CSS 类 
} 
</script> 
=/head> 


=body> 
一 ul onclickk="check()" class="ysUL1"> 
过! 户 足 球 <</li> 
二 1 一 篮球 二 /1 全 
li 这 羽毛 球 </li> 
</ul> 
</body> 
<=/html> 


运行 时 单 击 项 目 列表 后 ,实际 上 二 ul 二 的 class 属性 变 为 ， 





ul onclick= "check()" class="ysUL]1 ysUL2"> 
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代码 的 显示 效果 既 保 持 了 ysUL1 中 的 所 有 设置 ,又 追加 | :到 于 
了 ysUL2 中 所 设置 的 下 面 线 , 如 图 4-21 所 示 。 
回 回 








图 4-21 追加 CSS 类别 


综合 案例 ,请 扫 一 扫 





课 后 练习 

1. 在 kehoul. html 网 页 中 添加 行为 代码 ,实现 单 击 不 同 的 图 片 显示 不 同 图 片 的 样式 介 
绍 ( 如 单 击 图 片 1, 弹 出 窗口 显示 该 图 片 所 用 的 样式 为 testl) 。 

2. 在 kehou2. html 网 页 中 添加 行为 代码 ,实现 删除 第 二 段 文字 。 

3. 在 kehou3. html 网 页 中 添加 行为 代码 ,实现 单 击 图 片 后 将 图 片 替 换 为 grape. jpg。 

4. 在 kehou4. html 网 页 中 添加 行为 代码 ,实现 单 击 图 片 后 在 图 片 后 添加 一 段 文字 "这 
是 葡萄 ”。 





第 5 章 


JavaScript 中 的 对 象 


学 习 目 标 
掌握 JavaScript 的 语法 规则 。 
熟练 掌握 JavaScript 的 编程 方法 。 


5.1 对 象 的 基本 概念 


JavaScript 是 面向 对 象 的 编程 语言 (OOP), 因 此 其 提供 了 非常 强大 的 对 象 功 能 。 
JavaScript 中 的 所 有 事物 都 是 对 象 : 字符 串 .数字 ,数组 .日 期 等 , 很 多 实用 性 的 功能 必须 依 
靠 对 象 才能 实现 。 

1. 对 象 的 属性 和 方法 

对 象 可 以 看 成 是 一 种 特殊 的 数据 ,每 一 个 对 象 都 包括 众多 的 属性 和 方法 。 属 性 是 指 与 
对 象 有 关 的 值 , 其 表现 形式 一 般 是 变量 ;方法 指 对 象 可 以 执行 的 行为 ,其 表现 形式 一 般 是 函 
数 。 在 面向 对 象 的 语言 中 ,属性 和 方法 常 被 称 为 对 象 的 成 员 。 

例如 ,飞机 就 是 现实 生活 中 的 对 象 。 飞 机 的 属性 包括 机 型 ,大 小 、 载 客 量 .航程 等 。 飞 机 
的 方法 包括 起 飞 、 降 落 .航行 等 。 


2. 对 象 的 创建 
JavaScript 提供 了 很 多 已 经 定义 好 的 内 部 对 象 ,也 允许 用 户 自 定义 对 象 。 语 法 格式 如 下 : 


对 象 名 称 二 new Object(); 

对 象 名 称 .属性 = 值 ; 

对 象 名 称 .方法 名 二 function() 1 
// 为 对 象 添加 方法 

} 


访问 对 象 的 属性 和 方法 如 下 : 


对 象 名 称 .属性 
对 象 名称 . 方 法 名 () 


例 5-1 创建 一 个 飞机 对 象 , 并 添加 3 个 属性 和 2 个 方法 。 


=html> 
~head> 
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一 meta http-equiv= "Content-Type" content= "text/html; charset=utf{-8" /> 

<<title 一 创建 对 象 二 /title> 

一 script type= "text/JavaScript"> 

var plane 一 new Object() ; 

plane.name 一 "波音 747"; // 为 对 象 添 加 属性 

plane. passengers 一 "360 一 400 人 "; 

plane. Distance 二 "13570 千 米 "; 

plane. fly= function(){ // 为 对 象 添加 方法 
document. write(" 飞 行 目的 地 : 佛罗里达 州 一 br>"); 

} 

plane. flytime= function(){ 
document. write(" 飞 行 时 间 : 17 个 小 时 一 br>"); 

} 

=/script> 

=/head> 

=body> 

script type= "text/javascript"> 

document. write(plane. namet+ "=br>"); 

plane,fly(); 

plane,flytime() ; 

=/script> 

=/body> 

=/html> 


显示 效果 如 图 5-1 所 示 。 
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波音 747 
飞行 目的 地 ， 佛 罗 里 达州 
飞行 时 间 ，17 个 小 时 





图 5-1 创建 对 象 


5.2 内 置 对 象 


JavaScript 提供 多 个 内 置 对 象 ,比如 ,String、Date、Array 等 。 这 些 对 象 不 用 自己 定义 
可 以 直接 创建 并 调用 。 


5.2.1 字符 串 对 象 


字符 串 对 象 CString) 用 于 处 理 文本 , 即 字符 串 类 型 的 数据 。 
1. 字符 串 对 象 的 创建 
创建 字符 串 对 象 的 语法 如 下 : 
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new String(s); 
或 
String(s); 


其 中 ,参数 是 要 存储 在 字符 串 对 象 中 或 转换 成 原始 字符 串 的 值 。 字 符 串 对 象 也 可 以 直 
接 通 过 字符 串 变 量 来 引用 ,比如 ,在 例 5-2 中 就 没有 创建 字符 串 对 象 ,而 是 直接 对 一 个 字符 
串 变 量 引 用 了 。 


2. 字符 串 对 象 的 属性 


字符 串 对 象 的 属性 比较 少 ,其 中 length 属性 可 返回 字符 串 中 的 字符 数目 。 例 5-2 中 就 
使 用 了 这 个 属性 。 


3. 字符 串 对 象 的 方法 
字符 串 对 象 的 常用 方法 见 表 5-1。 
表 5-1 字符 串 对象 的 常用 方法 





















































方 法 描 述 
charAt() 返回 在 指定 位 置 的 字符 
concat() 连接 字符 串 
fontcolor() 使 用 指定 的 颜色 来 显示 字符 串 
fontsize() 使 用 指定 的 尺寸 来 显示 字符 串 
indexOf() 检索 字符 串 
lastIndexOf() 从 后 向 前 搜索 字符 串 
link() 将 字符 串 显 示 为 链接 
match() 找到 一 个 或 多 个 正则 表达 式 的 匹配 
replace() 替换 与 正则 表达 式 相 匹配 的 子 串 
search() 检索 与 正则 表达 式 相 匹 配 的 值 
split() 把 字符 串 分 割 为 字符 串 数组 
substring() 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 
toLocaleLowerCase() 把 字符 串 转 换 为 小 写 
toLocaleUpperCase() 把 字符 串 转换 为 大 写 
toLowerCase() 把 字符 串 转换 为 小 写 
toUpperCase() 把 字符 串 转换 为 大 写 


例 5-2 ”在 文本 框 中 输入 字符 串 , 当 离 开 输入 字段 时 ,显示 字符 串 长 度 , 并 将 输入 文本 


转换 为 大 写 。 


=html> 
=head> 


meta http-equiv= "Content-Type" content= "text/html; charset 一 utf-8" /> 


=script> 


function Stringfun() 
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var X 一 document. getElementByld("s"); 
document. write(" 输 入 的 字符 串 为 : "十 x.value 十 "二 br>"); 

document. write(" 字 符 串 长 度 : "十 x. value. length 二 "二 br 这"); 
x. value= x. value. toUpperCase(); 


document. write(" 字 符 串 转换 为 大 写 : "十 x. value 十 "二 br 二 "); 





} 

=</script> 

二 title 二 字符 串 对 象 二 /title 二 

</head> 

=body> 

请 输入 英文 字符 : 二 input type 一 "text" id 一 "s" onChange 二 "Stringfun() "> 
=/body> 

=/html> 


显示 效果 如 图 5-2 所 示 。 


口 5-2.html 
《 >》 由 DO 4 5-2html 《 >》 由 DD 安 4 5-2html 
请 输入 英文 字符 ， | 输入 的 字符 串 为 ，sfdsdfsfd 


字符 串 长 度 ，9 
字符 串 转换 为 大 写 ，SFDSDFSFD 





图 5-2 字符 串 对 象 应 用 的 示例 


5.2.2 数字 对 象 

在 JavaScript 中 ,数字 是 一 种 基本 的 数据 类 型 。JavaScript 还 支持 数字 对 象 (Number) ,该 
对 象 是 原始 数值 的 包装 对 象 。 在 必要 时 ,JavaScript 会 自动 地 在 原始 数据 和 对 象 之 间 转 换 。 

1. 数字 对 象 的 创建 

数字 对 象 的 创建 格式 如 下 : 


new Number( 值 ); 


Number( 值 ); 


参数 是 要 创建 的 Number 对 象 的 数值 ,或 是 要 转换 成 数字 的 值 。 

当 Number() 和 运算 符 new 一 起 作为 构造 函数 使 用 时 ., 它 返回 一 个 新 创建 的 Number 
对 象 。 如 果 不 用 new 运算 符 , 把 Number() 作为 一 个 函数 来 调用 , 它 将 把 自己 的 参数 转换 
成 一 个 原始 的 数值 ,并 且 返 回 这 个 值 (如 果 转 换 失败 , 则 返回 NaN)。 


2. 数字 对 象 的 属性 
数字 对 象 的 常用 属性 如 表 5-2 所 示 。 
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表 5-2 数字 对 象 的 常用 属性 


























属 性 描 述 
constructor 返回 对 创建 此 对 象 的 Number 函数 的 引用 
MAX_VALUE 可 表示 的 最 大 的 数 
MIN_VALUE 可 表示 的 最 小 的 数 
NaN 非 数 字 值 
NEGATIVE_INFINITY 负 无 穷 大 ,溢出 时 返回 该 值 
POSITIVE_INFINITY 正 无 穷 大 ,溢出 时 返回 该 什 
prototype 使 用 户 有 能 力 向 对 象 添 加 属性 和 方法 


3. 数字 对 象 的 方法 


数字 对 象 的 常用 方法 如 表 5-3 所 示 。 
表 5-3 数字 对 象 的 常用 方法 




















方 法 描 述 
toString() 把 数字 转换 为 字符 串 ,使 用 指定 的 基数 
toLocaleString() 把 数字 转换 为 字符 串 ,使 用 本 地 数字 格式 顺序 
toFixed() 把 数字 转换 为 字符 串 ,结果 的 小 数 点 后 有 指定 位 数 的 数字 
toExponential() 把 对 象 的 值 转换 为 指数 记 数 法 
toPrecision( ) 把 数字 格式 化 为 指定 的 长 度 
valueOf() 返回 一 个 Number 对 象 的 基本 数字 值 





例 5-3 将 文本 框 输入 的 字符 串 转化 为 数字 ,并 进行 加 法 运算 。 


=html> 

=head> 

=meta http-equiv= "Content-Type" 
=script> 

function jisuan( ) 


{ 


content= "text/html; charset 一 utf-8" /> 





var numl]= Number(document. getElementByld( "nl1"). value); 
var num2= Number(document. getElementByld("n2"). value) ; 
sum 一 numl 十 num2; 
document. getElementByld("sum"). value= sum; 

} 

=/script> 

二 title 二 数字 对 象 二 /title 二 

=/head> 


=body> 
input name= "nl" type= "text" id= "nl" size="8"> 
于 


=input name 一 "n2" type="text" id="n2" size="8"> 
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一 input name= "sum" type= "text" id="sum" size="8"> 

一 input type= "submit" name 二 "button" id 二 "button" value 王 "计算 "onclick 一 "jisuan()" 盖 
到 /body 二 

=/html> 


显示 效果 如 图 5-3 所 示 。 


9 次 Q 5-3.html 


] + [65 = [295 





图 5-3 数字 对 象 应 用 的 示例 


5.2.3 算数 对 象 


算数 对 象 (Math) 的 作用 是 ,执行 常见 的 算数 任务 。 算 数 对 象 并 不 像 字 符 串 那样 是 对 象 
的 类 ,因此 没有 构造 函数 Math(), 像 Math. sin() 这 样 的 函数 只 是 函数 ,不 是 某 个 对 象 的 方 
法 。 算 数 对 象 无 须 创建 ,通过 把 算数 作为 对 象 使 用 就 可 以 调用 其 所 有 属性 和 方法 。 


1. 使 用 算数 对 象 的 属性 和 方法 的 语法 
语法 格式 如 下 : 


var 变量 名 二 Math. Pl; 
var 变量 名 二 Math. sqrt(15); 


2. 算数 对 象 的 属性 
算数 对 象 的 常用 属性 如 表 5-4 所 示 。 
表 5-4 算数 对 象 的 常用 属性 


























属 性 描 述 
E 返回 算数 常量 e, 即 自然 对 数 的 底数 ( 约 等 于 2.718) 
LN2 返回 2 的 自然 对 数 ( 约 等 于 0. 693) 
LN10 返回 10 的 自然 对 数 ( 约 等 于 2. 302) 
LOG2E 返回 以 2 为 底 的 。 的 对 数 ( 约 等 于 1. 414) 
LOG10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0. 434) 
PI 返回 圆周 率 ( 约 等 于 3. 141 59) 
SQRT1 2 返回 2 的 平方 根 的 倒数 ( 约 等 于 0.707) 
SQRT2 返回 2 的 平方 根 ( 约 等 于 1. 414) 
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3. 算数 对 象 的 方法 


算数 对 象 的 常用 方法 如 表 5-5 所 示 。 
表 5-5 算数 对 象 的 常用 方法 






























































方 法 描 述 
abs(x) 返回 数 的 绝对 值 
acos(x) 返回 数 的 反 余弦 值 
asin( x) 返回 数 的 反正 弦 值 
atan( x) 以 介 于 一 P1/2 与 P1/2 弧度 之 间 的 数值 来 返回 x 的 反正 切 值 
atan2(y,x) 返回 从 x 轴 到 点 (x,y) 的 角度 ( 介 于 一 Pl/2 与 PI/2 弧度 ) 
ceil(x) 对 数 进行 上 舍 入 
cos(x) 返回 数 的 余弦 值 
exp(x) 返回 e 的 指数 
floor( x) 对 数 进行 下 舍 人 
log(x) 返回 数 的 自然 对 数 ( 底 为 e) 
max(x,y) 返回 x 和 y 中 的 最 大 值 
min(x,y) 返回 x 和 y 中 的 最 小 值 
pow(x,y) 返回 x 的 y 次 轿 
random() 返回 0 一 1 的 随机 数 
round( x) 把 数 四 舍 五 人 为 最 接近 的 整数 
sin(x) 返回 数 的 正弦 值 
sqrt(x) 返回 数 的 平方 根 
tan(x) 返回 角 的 正切 值 
toSource() 返回 该 对 象 的 源 代码 
valueOf() 返回 Math 对 象 的 原始 值 





例 5-4 产生 两 个 介 于 0 一 10 的 随机 数 ,并 比较 大 小 。 


=html> 

=head> 

一 meta http-equiv= "Content-Type" content= "text/html; charset= ut{-8" /> 
=script> 

function suijishu() 


{ 





var numl = Math. floor( Math. random() * 11); 
var num2= Math. floor( Math. random( ) * 11); 
document. getElementById("nl") .value 一 numl; 
document. getElementByld("n2").value= num2; 
document. getElementByld("max").value= Math. max(Cnuml,num2) ; 
} 
=</script> 
二 title 二 算数 对 象 二 /title 二 
</head> 
=body> 
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随机 数 1 

< 一 input name= "nl" type= "text" id= "nl" size="8"> 

&&nbsp; &nbsp; 随 机 数 2 

=input name 一 "n2" type= "text" id="n2" size="8"> 

了 nbsp; &nbsp; 最 大 数 二 

一 input name—= "max" type= "text" id="max" size—="8"> 

Bnbsp; &.nbsp; 

一 input type 一 "submit" name 一 "button" id 一 "button" value 二 "产生 随机 数 " onClick 二 "suijishu(O) "二 
=/body> 

=/html> 


显示 效果 如 图 5-4 所 示 。 
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随机 数 1 [2 随机 数 2 |8 














5.2.4 日 期 对 象 


日 期 对 象 (Date) 用 于 处 理 日 期 和 时 间 。 
1. 日 期 对 象 的 创建 
日 期 对 象 的 创建 格式 如 下 : 


new Date(); 


日 期 对 象 创建 后 会 返回 一 个 日 期 型 的 变量 ,并 自动 把 当前 日 期 和 时 间 保 存 为 其 初始 值 。 
2. 日 期 对 象 的 方法 


日 期 对 象 的 常用 方法 比较 多 ,主要 有 两 大 类 ,一 类 是 获取 各 种 形式 的 日 期 和 时 间 ; 另 一 
类 是 设置 日 期 和 时 间 ,日 期 对 象 的 常用 方法 如 表 5-6 所 示 。 
表 5-6 日 期 对 象 的 常用 方法 





























方 法 描 述 
Date() 返回 当日 的 日 期 和 时 间 
getDate() 从 日 期 对 象 返回 一 个 月 中 的 某 一 天 (1 一 31) 
getDay() 从 日 期 对 象 返回 一 周 中 的 某 一 天 (0 一 6) 
getMonth() 从 日 期 对 象 返回 月 份 (0 一 11) 
getFullYear(O) 从 日 期 对 象 以 4 位 数字 返回 年 份 
getHours() 返回 日 期 对 象 的 小 时 (0 一 23) 
getMinutes() 返回 日 期 对 象 的 分 钟 (0 一 59) 
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续 表 
方 法 描 述 
getSeconds() 返回 日 期 对 象 的 秒 数 (0 一 59) 
getMilliseconds() 返回 日 期 对 象 的 毫秒 (0 一 999) 





getTime() 


返回 1970 年 1 月 1 日 至 今 的 毫秒 数 





getTimezoneOffset() 


返回 本 地 时 间 与 格林 尼 治 标准 时 间 (GMT) 的 分 钟 差 





getUTCDate() 


根据 世界 时 从 日 期 对 象 返回 月 中 的 一 天 (1 一 31) 





getUTCDay() 


根据 世界 时 从 日 期 对 象 返回 周 中 的 一 天 (0 一 6) 





getUTCMonth() 


根据 世界 时 从 日 期 对 象 返回 月 份 (0 一 11) 





getUTCFullYear() 


根据 世界 时 从 日 期 对 象 返回 4 位 数 的 年 份 





getUTCHours() 


根据 世界 时 返回 日 期 对 象 的 小 时 (0 一 23) 





getUTCMinutes() 


根据 世界 时 返回 日 期 对 象 的 分 钟 (0 一 59) 





getUTCSeconds() 


根据 世界 时 返回 日 期 对 象 的 秒 钟 (0 一 59) 





getUTCMilliseconds() 


根据 世界 时 返回 日 期 对 象 的 毫秒 (0 一 999) 





setDate() 


设置 日 期 对 象 中 月 的 某 一 天 (1 一 31) 





setMonth() 


设置 日 期 对 象 中 月 份 (0 一 11) 





setFullYear() 


设置 日 期 对 象 中 的 年 份 (4 位 数字 ) 





setHours() 


设置 日 期 对 象 中 的 小 时 (0 一 23) 





setMinutes() 


设置 日 期 对 象 中 的 分 钟 (0 一 59) 





setSeconds() 


设置 日 期 对 象 中 的 秒 钟 (0 一 59) 





setMilliseconds() 


设置 日 期 对 象 中 的 毫秒 (0 一 999) 





setTime( ) 


以 毫秒 设置 日 期 对 象 





setUTCDate() 


根据 世界 时 设置 日 期 对 象 中 月 份 的 一 天 (1 一 31) 





setUTCMonth() 


根据 世界 时 设置 日 期 对 象 中 的 月 份 (0 一 11) 





setUTCFullYear() 


根据 世界 时 设置 日 期 对 象 中 的 年 份 (4 位 数字 ) 


























setUTCHours() 根据 世界 时 设置 日 期 对 象 中 的 小 时 (0 一 23) 
setUTCMinutes() 根据 世界 时 设置 日 期 对 象 中 的 分 钟 (0 一 59) 
setUTCSeconds() 根据 世界 时 设置 日 期 对 象 中 的 秒 钟 (0 一 59) 
setUTCMilliseconds() 根据 世界 时 设置 日 期 对 象 中 的 毫秒 (0 一 999) 
toString() 把 日 期 对 象 转换 为 字符 串 

toTimeString() 把 日 期 对 象 的 时 间 部 分 转换 为 字符 串 
toDateString() 把 日 期 对 象 的 日 期 部 分 转换 为 字符 串 
toUTCString() 根据 世界 时 ,把 日 期 对 象 转换 为 字符 串 





toLocaleString() 


根据 本 地 时 间 格 式 , 把 日 期 对 象 转换 为 字符 串 





toLocaleTimeString() 


根据 本 地 时 间 格 式 , 把 日 期 对 象 的 时 间 部 分 转换 为 字符 串 





toLocaleDateString() 


根据 本 地 时 间 格 式 , 把 日 期 对 象 的 日 期 部 分 转换 为 字符 串 





UTCO 


例 5-5 在 网 页 上 显示 时 间 。 


=html> 
=head> 


所 meta http-equiv= "Content-Type" content= "text/html; charset 一 utf-8" /> 





根据 世界 时 返回 1970 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
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一 script type= "text/javascript"> 
function showTime() 
{ 
var today 一 new Date(); 
var h= today. getHours(); 
var m= today. getMinutes(); 
var s=today. getSeconds(); 
m=addTime(m); 
s=addTime(s); 
document. getElementByld(time’) .innerHTML 王 h 十 ":" 十 mm 十 ":" 十 Si; 
t 一 setTimeout(CshowTime()",500); 
} 
function addTime(i) 
{ 
if (i<10) 
{i="0"+i;} 
return i; 
} 
/script> 
一 title 之 日 期 对 象 二 /title 二 
=/head> 
body onload= "showTime()"> 
<divid="time"></div> 23:47:19 
=/body> 
</html> 


显示 效果 如 图 5-5 所 示 。 a 
图 5-5 在 网 页 上 显示 时 间 


《 > 安 A5-5.html 





5.2.5 数组 对 象 


数组 对 象 (Array) 用 于 在 一 个 名 称 的 变量 下 存储 多 个 值 , 其 是 数据 存储 的 一 个 重要 类 
型 ,常常 和 循环 配合 使 用 。 


1. 数组 的 定义 


由 于 可 选 的 初始 参数 不 一 样 , 因 此 其 创建 的 语法 格式 有 多 种 ,主要 有 以 下 3 种 。 
第 一 种 语法 是 最 简单 的 。 其 语法 格式 如 下 : 


new Array(); 


在 这 种 定义 中 ,没有 指明 数组 的 存储 数量 ( 即 下 标 数量 ) ,可 以 在 后 面 通过 赋值 语句 来 动 
态 增加 数组 的 长 度 , 例 5-6 中 使 用 的 就 是 这 种 方式 。new 表示 新 创建 一 个 对 象 , 是 
JavaScript 的 类 操作 运算 符 。 

第 二 种 语法 格式 中 包括 了 一 个 参数 。 其 语法 格式 如 下 : 


new Array(Csize) ; 


本 格式 中 ,包括 了 一 个 参数 ,该 参数 指定 了 数组 的 大 小 。 
第 三 种 语法 格式 包括 了 多 个 参数 。 其 语法 格式 如 下 : 
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new Array(element0, element0, ..., elementn); 


这 种 格式 中 ,包括 了 一 组 参数 列表 ,新 创建 的 数组 的 元 素 就 会 被 初始 化 为 这 些 值 。 
2. 数组 对 象 的 常用 属性 

数组 对 象 中 最 常用 的 属性 是 length, 其 可 设置 或 返回 数组 中 元 素 的 数目 。 

3. 数组 对 象 的 常用 方法 


数组 对 象 提供 了 丰富 的 方法 供用 户 调用 ,方法 名 称 和 功能 描述 如 表 5-7 所 示 。 
表 5-7 数组 对 象 的 常用 方法 





























方 法 描 述 
concat() 连接 两 个 或 更 多 的 数组 ,并 返回 结果 
join() 把 数组 的 所 有 元 素 放 和 人 一 个 字符 串 。 元 素 通过 指定 的 分 隔 符 进 行 分 隔 
pop() 删除 并 返回 数组 的 最 后 一 个 元 素 
push() 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ,并 返回 新 的 长 度 
Teverse() 颠倒 数组 中 元 素 的 顺序 
shift() 删除 并 返回 数组 的 第 一 个 元 素 
slice() 从 某 个 已 有 的 数组 返回 选 定 的 元 素 
sort() 对 数组 的 元 素 进行 排序 
toString() 把 数组 转换 为 字符 串 ,并 返回 结果 





例 5-6 创建 两 个 数组 ,一 个 数组 用 来 保存 英文 ,一 个 数组 用 来 保存 数字 ,对 这 两 个 数 
组 按 字母 顺序 和 数字 顺序 进行 大 小 排序 (升序 排列 ) 。 


=html> 

所 head 一 

所 meta http-equiv= "Content-Type" content= "text/html; charset= ut{-8" /> 
过 title 二 数组 对 象 过 /title 二 

</head> 

=body> 

script type= "text/javascript"> 


xcr 





var arr 一 new Array(6) ; 

arr[0] 一 "tom"; 

arr[]] 一 "and" ; 

arr[2] 一 "kite"; 

arr[3] = "apple"; 

arr[4] 一 "bird" ; 

arr[5] 一 "good"; 

document. write(" 原始 数组 "十 arr 十 "<br /人 >"); 
document. write(" 按 字母 排序 "十 arr.sort()); 
</script> 

<p> 

script type= "text/javascript"> 


function sortNumber(a,b) 
{return a-b; 
} 


var arr 一 new Array(6); 


arr[0] 一 "120"; 
arr[1]="56"; 
arr[2] 一 "23"; 
arr[3] 一 "77"; 
arr[4] 一 "68"; 
arr[5] 一 "20"; 
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document. write(" 原始 数组 "十 arr 十 "二 br /二 "); 
document. write(" 按 数字 排序 "十 arr. sort(sortNumber)); 


=</script> 
=/body> 
=/html> 


显示 效果 如 图 5-6 所 示 。 


《< >QDO 安 a5-6html 


原始 数组 tom and, kite, apple, bird, good 


按 字 母 排序 and, apple, bird, good kite, tom 


原始 数组 120, 56, 23, 77, 68, 20 
按 数字 排序 20, 23, 56, 68, 77, 120 





5.2.6 浏览 器 对 象 


图 5-6 数组 对 象 应 用 的 示例 


浏览 器 对 象 (Navigator) 包 含有 关 浏 览 器 的 信息 ,由 于 浏览 器 程序 本 身 已 经 存在 ,因此 
本 对 象 不 用 创建 就 可 以 直接 使 用 。 注 意 ,浏览 器 对 象 在 JavaScript 程序 中 是 唯一 的 ,在 同一 
个 程序 中 不 存在 两 个 浏览 器 对 象 。 

浏览 器 对 象 多 用 于 获取 浏览 器 信息 ,因此 其 包含 了 较 多 的 属性 ,浏览 器 对 象 的 常用 属性 


如 表 5-8 所 示 。 


表 5-8 浏览 器 对 象 的 常用 属性 























属 人 性 描 述 
appCodeName 返回 浏览 器 的 代码 名 
appMinorVersion 返回 浏览 器 的 次 级 版 本 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
browserLanguage 返回 当前 浏览 器 的 语言 
cookieEnabled 返回 指明 浏览 器 中 是 否 启 用 Cookies 的 布尔 值 
cpuClass 返回 浏览 器 系统 的 CPU 等 级 
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属 性 描 述 
onLine 返回 指明 系统 是 否 处 于 脱 机 模式 的 布尔 值 
platform 返回 运行 浏览 器 的 操作 系统 平台 
systemLanguage 返回 操作 系统 使 用 的 默认 语言 
userAgent 返回 由 客户 机 发 送 到 服务 器 的 user-agent 头 部 的 值 
userLanguage 返回 操作 系统 的 自然 语言 设置 


例 5-7 检查 浏览 器 的 相关 信息 。 


=html> 
=head> 


二 meta http-equiv= "Content-Type" content= "text/html; charset=ut{-8" /> 
过 title 一 浏览 器 对 象 二 /title 二 


</head> 
=body> 


script type= "text/javascript"> 


document. 
document. 
document. 
document. 
document 
document. 
document. 
document. 
document. 
document 


write(" 一 p 二 浏览 器 : ") 
writeCnavigator.appName 十 "一 /p 二 ") 
write(" 一 p 二 浏览 器 版 本 : ") 
write(navigator.appVersion 十 "<=/p>") 


.write(" 一 p 二 代码 : ") 


write(navigator.appCodeName 十 "一 /p 二 ") 
write("<p 过 平台 : ") 

write(navigator. platform 十 "<=/p>") 
write(" 一 p 二 Cookies 启用 : ") 


. write( navigator. cookieEnabled 十 "</p>") 


</script> 


=/body> 


=/html> 


显示 效果 如 图 5-7 所 示 。 


《 > 5-7html 
浏览 器 ， 
浏览 器 版 本 ，5.0 (Windows NT 6.1; WON64) AppleWebgit/537. 36 (EHTIL, like Gecko) Chrome/48.0.2564.116 Safari/537.36 


Netscape 


TheWorld 7 
代码 ，Jozilla 
用 平台 :Win32 


Cookies 


启用 ;true 





图 5-7 浏览 器 对 象 应 用 的 示例 


5.2.7 文档 对 象 


每 个 载 入 浏览 器 的 HTML 文档 都 会 成 为 文档 对 象 (document) ,因此 本 对 象 也 不 用 








创 


建 就 可 以 直接 使 用 。 文 档 对 象 使 开发 者 可 以 通过 JavaScript 程序 对 HTML 页 面 中 的 所 有 
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元 素 进行 访问 。 实 际 上 文档 对 象 是 窗口 对 象 的 一 部 分 ,可 通过 window. document 属性 对 其 
进行 访问 。 

1. 文档 对 象 的 集合 属性 

由 于 文档 对 象 指 代 了 整个 网 页 的 正文 内 容 , 而 网 页 的 正文 ( 指 氨 body 之 和 所 /body> 之 


间 的 内 容 ) 中 一 般 包 括 了 大 量 的 控件 对 象 , 因 此 文档 对 象 中 出 现 了 集合 属性 。 文 档 对 象 常用 
的 集合 属性 如 表 5-9 所 示 。 


表 5-9 文档 对 象 常用 的 集合 属性 




















集 合 描 述 
all[] 提供 对 文档 中 所 有 HTML 元 素 的 访问 
anchors[] 返回 对 文档 中 所 有 Anchor 元 素 的 引用 
forms[ ] 返回 对 文档 中 所 有 Form 元 素 的 引用 
images[] 返回 对 文档 中 所 有 Image 元 素 的 引用 
links[] 返回 对 文档 中 所 有 Area 和 Link 元 素 的 引用 


2. 文档 对 象 的 属性 
文档 对 象 包括 较 多 的 属性 ,主要 是 网 页 正文 的 一 些 参数 值 ,常用 属性 如 表 5-10 所 示 。 
表 5-10 文档 对 象 的 常用 属性 























属 性 描 述 
ba 提供 对 二 body 二 元 素 的 直接 访问 。 对 于 定义 了 框架 集 的 文档 ,该 属性 引用 最 外 层 的 
=frameset> 
cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 Cookie 
domain 返回 当前 文档 的 域名 
lastModified ”| 返回 文档 被 最 后 修改 的 日 期 和 时 间 
referrer 返回 载 人 当前 文档 的 URL 
title 返回 当前 文档 的 标题 
URL 返回 当前 文档 的 URL 





3. 文档 对 象 的 方法 
文档 对 象 的 方法 比较 常用 ,尤其 是 document. write() 方 法 ,其 常用 方法 如 表 5-11 所 示 。 
表 5-11 文档 对 象 的 常用 方法 




















方 法 描 述 
getElementById() 返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 
getElementsByName() 返回 带 有 指定 名 称 的 对 象 集合 
getElementsByTagName() 返回 带 有 指定 标签 名 的 对 象 集合 
write() 向 文档 写 HTML 表达 式 或 JavaScript 代码 
writeln() 等 于 write() 方 法 ,不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 
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例 5-8 读 取 表单 输入 内 容 , 并 显示 。 


=html> 
<head> 


一 meta http-equiv= "Content-Type" content= "text/html; charset=ut{-8" /> 


<title> 文 档 对 象 一 /title> 
=/head> 
=body> 
一 p 二 用 户 名 1: 
一 label for= "name"></label> 








二 input name= "name" type= "text" id="name" size="10"> 


& nbsp;& nbsp; 用 户 名 2: 





二 input name= "name" type= "text" id="name" size="10"> 


</p> 
一 p 二 &nbsp; 性 别 1: &nbsp; 
=label for="sex"></label> 


input name= "sex" type= "text" id= "sex" size="10"> 


Bnbsp; Bnbsp; Bnbsp; Bnbsp; &-nbsp; 性 别 2: 


input name= "sex" type="text" id= "sex" size="10"> 


一 label for= "sex"><=/label> 
</p> 
一 p 二 &nbsp;i&nbsp; 年 龄 1: 

所 label for="age"><=/label> 


input name= "age" type 一 "text"” id="age" size="10"> 


Bnbsp; &.nbsp; &nbsp; &nbsp; &nbsp; 年 龄 2: 


=input name= "age" type= "text" id 一 "age" size="10"> 


</p> 
<p> 


过 input type 二 "submit" name 二 "btn" id 二 "btn" value 一 "显示 用 户 输入 内 容 " onClick 王 "showinfo 


《和 
</p> 
=script type 


text/javascript"> 
function showinfo() 


{ 


var name 一 document. getElementsByName( "name" ) ; 


var sex= document. getElementsByName("sex") ; 
var age 一 document. getElementsByName( "age"); 
document. write(" 用 户 名 1: "十 name[0]. value 十 "," 





"性 别 : "十 sex[0] .value 十 ", "十 "年 龄 "十 age 





[oj .value 十 "一 br> 用 户 名 2: "十 name[1] .value 十 ", "十" 性别 : "十 sex[1].value 十 "," 十 "年 


龄 "十 age[1] .value 十 "一 br>"); 
} 
</script> 
=/body> 
=/html> 


显示 效果 如 图 5-8 所 示 。 


例子 中 使 用 的 getElementsByName() 方法 和 getElementById() 方法 相似 ,但 是 它 查 


询 元 素 的 name 属性 ,而 不 是 id 属性 。 而 且 一 个 文档 中 的 name 属性 可 能 不 唯一 (如 
HTML 表单 中 的 单 选 按钮 通常 具有 相同 的 name 属性 ) ,所 以 getElementsByName() 方法 
返回 的 是 元 素 的 数组 ,而 不 是 一 个 元 素 。 
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Dn 


x 
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用 户 名 1， 





性 别 1， 











年 龄 1: 
显示 用 户 输入 内 容 


5.2.8 窗口 对 象 





， ] + 1 性别， 男 ,年 龄 24 
丽人 ，2, 性 别 ， 女 , 年 龄 21 


性 别 2， 6 
年 龄 2: 





图 5-8 文档 对 象 应 用 的 示例 


窗口 对 象 (window) 表 示 浏 览 器 中 打开 的 窗口 ,其 值 也 不 用 创建 就 可 以 直接 使 用 。 
1. 窗口 对 象 的 对 象 集合 


普通 网 页 中 只 有 一 个 窗口 对 象 ,但 如 果 文 档 包 含 框架 结构 (使 用 了 frame 或 iframe 标 
签 时 ) ,浏览 器 会 为 网 页 文档 创建 一 个 窗口 对 象 , 并 为 每 个 框架 创建 一 个 额外 的 窗口 对 象 。 
在 使 用 时 可 以 引用 窗口 对 象 的 对 象 集合 frames[ ]。 该 集合 是 窗口 对 象 的 数组 ,每 个 窗口 对 
象 在 窗口 中 含有 一 个 志 frame 二 或 一 iframe 之 。 属 性 frames. length 存放 数组 frames[] 中 含 
有 的 元 素 个 数 。 当 框架 网 页 的 下 一 级 页 面 中 还 包括 框架 时 ,frames[] 数 组 还 可 以 引用 另 一 
个 表示 下 一 级 页 面 框 的 frames[] 数 组 。 


2. 窗口 对 象 的 属性 


窗口 对 象 中 包括 了 窗口 的 位 置 ,大 小 等 信息 ,还 包括 了 对 其 他 对 象 的 引用 。 窗 口 对 象 的 
常用 属性 如 表 5-12 所 示 。 


表 5-12 窗口 对 象 的 常用 属性 








属 性 描 述 
closed 返回 窗口 是 否 已 被 关闭 
defaultStatus 设置 或 返回 窗口 状态 栏 中 的 默认 文本 


























document 对 窗口 对 象 的 只 读 引用 
history 对 历史 对 象 的 只 读 引用 
innerheight 返回 窗口 的 文档 显示 区 的 高 度 
innerwidth 返回 窗口 的 文档 显示 区 的 宽度 
length 设置 或 返回 窗口 中 的 框架 数量 
name 设置 或 返回 窗口 的 名 称 
navigator 对 窗口 对 象 的 只 读 引 用 
opener 返回 对 创建 此 窗口 的 引用 





outerheight 


返回 窗口 的 外 部 高 度 





outerwidth 





返回 窗口 的 外 部 宽度 
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续 表 
属 性 描 述 
pageXOffset 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 X 位 置 
pageYOffset 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 Y 位 置 
status 设置 窗口 状态 栏 的 文本 
top 返回 最 顶层 的 先辈 窗口 
ScreenLeft 
本 只 读 整 数 。 声 明了 窗口 的 左上 角 在 屏幕 上 的 x 坐标 和 y 坐标 。IE 和 Opera 
支持 screenLeft 和 screenTop,Firefox 支持 screenX 和 screenY。Safari 全 部 
ScreenX 
支持 
ScreenY 





3. 窗口 对 象 的 方法 


窗口 对 象 的 常用 方法 主要 涉及 窗口 一 些 参数 的 设置 ,其 常用 方法 如 表 5-13 所 示 。 
表 5-13 窗口 对 象 的 常用 方法 



























































方 法 描 述 
alert() 显示 带 有 一 段 消息 和 一 个 “确认 ”按钮 的 警告 框 
clearInterval( ) 取消 由 setInterval() 方 法 设置 的 timeout 
clearTimeout() 取消 由 setTimeout() 方 法 设置 的 timeout 
close() 关闭 浏览 器 窗口 
confirm() 显示 带 有 一 段 消息 以 及 “确认 ”按钮 和 “取消 ”按钮 的 对 话 框 
createPopup() 创建 一 个 pop-up 窗口 
focus() 把 键盘 焦点 给 予 一 个 窗口 
moveBy() 可 相对 窗口 的 当前 坐标 把 它 移动 指定 的 像素 
moveTo() 把 窗口 的 左上 角 移动 到 一 个 指定 的 坐标 
open() 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
print() 打印 当前 窗口 的 内 容 
prompt() 显示 可 提示 用 户 输入 的 对 话 框 
resizeBy() 按照 指定 的 像素 调整 窗口 的 大 小 
resizeTo() 把 窗口 的 大 小 调整 到 指定 的 宽度 和 高 度 
scrollBy() 按照 指定 的 像素 值 来 滚动 内 容 
scrollToO) 把 内 容 滚动 到 指定 的 坐标 
setInterval() 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 
setTimeout() 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 


例 5-9 显示 提示 框 ,要 求 用 户 输入 用 户 名 ,如 果 用 户 单 击 提示 框 的 “取消 ”按钮 , 则 返 
回 null。 如 果 用 户 单 击 “ 确 认 ” 按 钮 , 则 返回 输入 的 内 容 。 sn [a] 
=html> 
=head> 


meta http-equiv= "Content-Type" content= "text/html; charset=utf{-8" /> 
二 title 二 窗口 对 象 二 /title 二 扫 一 扫 
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=script type= "text/javascript"> 
function uname_prompt() 
{ 
var name 一 prompt(" 请 输入 您 的 名 字 ") 
if (name! 一 null && name!="") 
{ 
document. write(" 用 户 : " 十 name 十 ", 欢 迎 登录 !") 
} 
} 
/script> 
</head> 
=body> 
一 input type 二 "submit"” name 二 "button” id 二 "button”value 二 "输入 用 户 名 " onclick 二 "uname_ 
prompt() "> 
=/body> 
</html> 














图 5-9 窗口 对 象 应 用 的 示例 


回 
综合 案例 ,请 扫 一 扫 。 





课 后 练习 

1. 编写 一 个 JavaScript 程序 ,在 页 面 中 有 一 个 按钮 , 单 击 后 页 面 的 背景 变化 成 其 他 
颜色 。 

2. 编写 一 个 JavaScript 程序 , 当 页 面 打开 时 会 自动 生成 本 年 度 12 个 月 的 月 历 ,每 个 月 
历 中 使 用 红字 标识 出 周 六 日 ,其 他 日 期 使 用 黑 字 标识 ,今天 ”使 用 蓝 字 并 加 粗 标识 。 

3. 检测 访问 者 的 浏览 器 和 版 本 号 。 

4. 显示 一 个 确认 对 话 框 ,询问 用 户 “ 是 否 要 关闭 浏览 器 ”, 如 果 用 户 单 击 “确定 ”按钮 则 
自动 关闭 浏览 器 ;如 果 用 户 单 击 “ 取 消 ?按钮 则 返回 当前 网 页 。 


第 6 章 


JavaScript 中 的 事件 与 事件 处 理 


学 习 目 标 
掌握 JavaScript 的 常用 事件 及 响应 方法 。 
熟练 应 用 事件 处 理 方 式 , 完 成 网 页 常用 功能 的 编写 。 


6.1 事件 及 事件 处 理 程序 


JavaScript 程序 和 网 页 页 面 之 间 的 交互 一 般 是 通过 触发 浏览 器 界面 中 的 控件 ,进而 引 
发 事件 来 处 理 的 。 

网 页 中 的 每 个 元 素 都 可 以 产生 某 些 可 以 触发 JavaScript 函数 的 行为 ,这 些 行为 可 以 被 
JavaScript 程序 侦 测 到 , 称 其 为 事件 。 例 如 ,用 户 在 页 面 中 单 击 某 按钮 , 则 会 产生 一 个 鼠标 
单 击 Conclick) 事 件 ,并 调用 之 前 在 按钮 的 HTML 标签 符 上 关联 的 JavaScript 函数 ,完成 对 
事件 的 处 理 。 

如 果 需 要 对 某 一 事件 进行 处 理 , 需 要 进行 两 部 分 的 设置 。 

(1) 在 相应 网 页 页 面 的 元 素 标 签 符 中 加 入 事件 属性 ,并 设置 事件 属性 为 一 JavaScript 
函数 。 

(2) 在 JavaScript 程序 中 编写 一 个 函数 处 理 对 应 的 事件 。 

JavaScript 程序 支持 的 事件 如 表 6-1 所 示 。 


表 6-1 JavaScript 程序 支持 的 事件 






































事件 名 称 功能 解释 事件 名 称 功能 解释 
onabort 图 像 加 载 被 中 断 onmousedown | 某 个 鼠标 按键 被 按 下 
onblur 元 素 失去 焦点 onmousemove | 鼠标 指针 被 移动 
onchange 用 户 改变 域 的 内 容 onmouseout 鼠标 指针 从 某 元 素 移 开 
onclick 鼠标 单 击 某 个 对 象 onmouseover | 鼠标 指针 被 移 到 某 元 素 之 上 
ondblclick 鼠标 双击 某 个 对 象 onmouseup 某 个 鼠标 按键 被 松 开 
onerror 当 加 载 文档 或 图 像 时 发 生 某 个 错误 | onreset “ 重 置 ?按钮 被 单 击 
onfocus 元 素 获得 焦点 onresize 窗口 或 框架 被 调整 尺 十 
onkeydown 某 个 键盘 的 键 被 按 下 onselect 文本 被 选 定 
onkeypress 某 个 键盘 的 键 被 按 下 或 按 住 onsubmit “提交 ”按钮 被 单 击 
onkeyup 某 个 键盘 的 键 被 松 开 onunload 用 户 退 出 页 面 
onload 某 个 页 面 或 图 像 被 完成 加 载 
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虽然 JavaScript 程序 提供 了 很 多 事件 ,但 经 常 使 用 的 就 几 种 ,下 面 几 节 将 重点 介绍 这 些 
比较 常用 的 事件 。 








6.2 JavaScript 的 常用 事件 


6.2.1 键盘 事件 


键盘 事件 是 对 键盘 操作 的 响应 ,其 主要 包括 以 下 几 个 事件 。 

(1) onblur, 当 元 素 失去 焦点 时 触发 ,一 般 与 文本 框 结合 使 用 ,用 于 判断 用 户 输入 的 内 
容 是 否 正确 。 

(2) onfocus, 当 元 素 获 得 焦点 时 触发 。 

(3) onchange, 当 元 素 内 容 被 改变 时 触发 。 

(4) onkeydown, 某 个 键盘 的 键 被 按 下 时 触发 。 

(5) onkeyup, 某 个 键盘 的 键 被 抬 起 时 触发 。 

(6) onkeypress, 按 了 某 个 键盘 的 键 时 触发 ( 即 onkeydown 十 onkeyup) 。 

例 6-1 下 面 的 代码 中 ,完成 了 用 户 输入 内 容 的 即时 判断 。 

=html> 

<head> 

meta http-equiv= "Content-Type " content= "text/html; charset= utf-8" /二 二 title 

例 6-1</title> 

< 一 script language= "javascript"> 

function {1() { 


if(document. getElementById(Cinputl) .value= = "hello") 
jl1.innerText=” 输入 正确 "; 





else 
jl1.innerText= 王 ” 输入 错误 !; 
} 
function {2() { 
if(document. getElementByld('input2") .value= = "123456") 
j2.innerText 二 ” 输入 正确 "; 
else 
j2.innerText 二 "” 输入 错误 !"; 
} 
function {3() { 
if(document. getElementByld('‘input3" .value= = "javascript" ) 
j3.innerText 二 "” 输入 正确 "; 
else 
j3.innerText 二 "” 输入 错误 !"; 
} 
/script>=/head> 
=body><=form id= "forml" name= "forml" method= "post" action=""> 
二 p align 二 "center" 祖 请 输入 hello: 一 input type 一 "text"” name 二 "inputl" id 一 "inputl1"onblur 一 
{10)><label id=jl></label> 
二 p align 一 "center" 二 请 输入 123456: 二 input type 二 "text" name 二 "input2" id 一 "input2" 
onChange={2()><=label id=j2><=/label> 
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一 pb align 一 "center" 二 请 输入 javascript: 一 input type 一 "text"”name 一 "input3"” id 一 "input3" 
onkeypress 一 f() 二 一 label id=j3><=/label> 
=</form></body><=/html> 


(onchange) 和 键盘 输入 事件 (onkeypress) 的 处 理 函 数 。3 个 处 理 函 数 都 是 判断 对 应 的 文本 
框 中 的 内 容 是 否 正确 ,如 果 正 确 则 显示 “输入 正确 ”, 否 则 显示 “输入 错误 1”。 








失去 焦点 事件 (onblur) 的 处 理 函 数 是 当 用 户 输入 完成 后 , 按 Tab 键 或 使 用 鼠标 单 击 其 
他 控件 后 会 被 激活 并 执行 。 

内 容 改 变 事件 (onchange) 与 失去 焦点 事件 的 Ce 
执行 条 件 相似 ,但 如 果 在 输入 完成 后 , 按 Enter 键 请 Na 

会 激活 本 事件 的 处 理 函 数 。 | 请 输入 l23456:[ | 

键盘 输入 事件 (onkeypress) 是 当 用 户 在 文本 请 给 Ajavascript: ， | 
框 中 有 任何 的 输入 都 会 被 激活 。 

本 程序 的 运行 效果 如 图 6-1 所 示 。 图 6-1 键盘 事件 示例 的 运行 效果 图 


6.2.2 鼠标 事件 

鼠标 事件 是 JavaScript 程序 中 最 常用 的 事件 之 一 ,其 功能 是 响应 鼠标 的 各 种 操作 ,主要 
包括 以 下 几 个 常用 事件 。 

1. 鼠标 单 击 事件 (onclick) 


本 事件 最 常用 , 当 鼠 标 单 击 时 产生 ,一 般 与 按钮 元 件 配 合 使 用 ,本 章 中 很 多 示例 都 使 用 
了 该 事件 。 


2. 鼠标 指针 指向 事件 (onmouseover) 

当 鼠 标 指针 指向 某 一 目标 区 域 时 ,会 触发 此 事件 。 

3. 鼠标 指针 移 开 事件 (onmouseout) 

当 鼠 标 指针 离开 某 一 目标 区 域 时 ,会 触发 此 事件 。 鼠 标 指针 移 开 事件 和 鼠标 指针 指向 





事件 经 常 同时 配合 使 用 。 
例 6-2 下 面 的 代码 中 ,给 出 了 使 用 鼠标 事件 进行 动态 菜单 处 理 的 方法 。 加 
=html> 
=head> 


meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
二 title 二 例 6-2 二 /title 二 

~style> 

.menu{ VISIBILITY: hidden; } 


.cur { cursor:hand; } 





body {cursor:default; } 
.obj { font-size:30px; } 
</style> 
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一 script language= javascript> 
function hide(){ 

ml. style. visibility=""; 
} 
function hidel(){ 

m2. style. visibility=""; 
} 
function hide2(){ 

m3. style. visibility=""; 
} 
function view(){ 

ml. style. visibility= "visible" ; 
} 
function viewl(){ 

m2. style. visibility= "visible" ; 
} 
function view2(){ 

m3. style. visibility= "visible" ; 
} 


function changecolor( color) 
obj. style. color= color; 


function changebkcolor(color) { 
obj. style. backgroundColor= color; 
} 
function changesize( size){ 
obj. style. fontSize= size; 
} 
=/script>=/head> 
一 body 二 一 table border=0><tr valign= top><=td> 
=div onmouseover 一 view() onmouseout 王 hide() class=cur> 
<b>[ Color ]</b> 
<divid=ml class=menu> 
=table border 一 0 二 
<tr><td><div class= cur onclickk= changecolor( "red")>Red</div> 
<tr><td><div class= cur onclick= changecolor( "blue")>Blue< /div> 
<tr><td><div class= cur onclick= changecolor( "black")>Black=/div> 
=tr><td><div class= cur onclick= changecolor( "green")>Green</div> 
<tr><td><div class= cur onclick= changecolor( "yellow")> Yellow=/div> 
=/table> 
</div> 
</div> 
一 td valign= top> 
=div onmouseover 一 viewl() onmouseout= hidel() class=cur> 
=<b>[ Background Color ]</b> 
=div id 一 m2 class—=menu> 
=table border=0> 
=tr><td><div class= cur onclick= changebkcolor("green")>Green</div> 
<tr><td>=div class 一 cur onclick= changebkcolor("black")>Black=/div> 
<tr><td><div class= cur onclick= changebkcolor("White")> White</div> 
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<tr><td>=<div class= cur onclick= changebkcolor("red")>Red</div> 
<=/table> 
</div> 
</div> 
一 td valign= top> 
一 div onmouseover=view2() onmouseout= hide2() class=cur> 
=b>[ Front Size ] 一 /b> 
所 div id 一 m3 class=menu> 
< 一 table border 一 0 二 
<tr><td><div class= cur onclickk= changesize("10px")>10px=/div> 
<tr><td><div class= cur onclick= changesize("20px")>20px=/div> 
<tr><td><div class= cur onclick= changesize("30px")>30px=/div> 
<tr><td><div class= cur onclick= changesize("40px")>40px=/div> 
<tr><td><div class= cur onclickk= changesize("50px")>50px=/div> 
<tr><td><div class= cur onclick= changesize("60px")>60px=/div> 
=<tr><td><div class= cur onclick= changesize("70px")>70px</div> 
<tr><td><div class= cur onclick= changesize("80px")>80px=/div> 
<tr><td><div class= cur onclick= changesize("90px")>90px=/div> 
<tr><td><div class= cur onclick= changesize("100px")>100px<=/div> 
=/table> 
</div> 
</div> 
=/table><=p>=div id 一 obj class= obj align= center> Hello, world!=/div> 
=/body><=/html> 


菜单 的 设计 一 般 是 使 用 块 和 表格 共同 完成 的 ,每 一 个 菜单 都 定义 在 一 个 块 ( 过 div 之 和 
去 /div 之 ) 中 ,并 对 这 个 块 增加 鼠标 指针 指向 和 移 开 事件 的 处 理 函 数 ,如 同 下 面 的 语句 ， 









=div onmouseover 一 viewX() onmouseout 一 hideX() class=cur> 


鼠标 事件 的 处 理 函 数 的 内 容 非常 简单 ,只 需 设 置 相 应 对 象 的 style. visibility 属性 值 即 
可 , 当 值 是 “visible” 时 表示 菜单 可 见 ; 当 值 是 空 值 ( 即 "") 时 表示 菜单 不 可 见 。 

在 本 程序 开始 处 首先 使 用 CSS( 层 释 样 式 表 ) 定 义 了 4 个 样式 ,其 中 ,. menu 样式 (其 内 容 
是 { VISIBILITY: hidden; }) 设 置 了 不 可 见 属性 , 当 其 应 用 在 定义 菜单 的 块 上 时 , 则 将 菜单 部 分 隐 
藏 。 在 每 一 个 菜单 项 中 还 使 用 了 鼠标 单 击 事件 ,以 便 实 现 颜色 .背景 色 和 字体 大 小 的 改变 。 

本 例 的 运行 效果 如 图 6-2 所 示 。 


6.2.3 onload 事件 和 onunload 事件 


当 网 页 被 浏览 器 加 载 执行 或 关闭 网 页 时 .也 都 会 触发 页 面 载 和 事件 (onload) 和 页 面 离 
开 事 件 (onunload)。 

页 面 载 人 事件 (onload) 常 用 来 检测 访问 者 的 浏览 器 类 型 和 版 本 ,然后 根据 这 些 信 息 载 
入 特定 版 本 的 网 页 。 页 面 离开 事件 (onunload) 一 般 是 放置 一 些 提示 信息 。 

例 6-3 下 面 的 代码 中 ,对 浏览 器 的 类 型 和 是 否 支持 Cookie 功能 进行 了 
判断 。 


=html><head> 
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《 > a 62html 


[ Color ] [ Background Color ] [ Front Size ] 
10px 
20px 
30px 
40pz 
50pz 


60pz 
TOpx 
80pz 
90pzx 
100px 


Hello, world! 





图 6-2 使 用 JavaScript 实现 的 动态 菜单 


二 title> 例 6-3 二 /title> 
script language= "javascript"> 
function judge() { 
// 显 示 浏 览 器 信息 
document. write(" 浏 览 器 名 称 : " 十 navigator.appName 十 "一 br>"); 
document. write(" 浏 览 器 版 本 : " 十 navigator.appVersion 十 "一 br 二 "); 
document. write("Cookies 是 否 启 用 : "十 navigator. cookieEnabled 十 "一 br>"); 
document. write("user-agent 头 部 : " 十 navigator. userAgent 十 "一 br> 一 p 二 "); 
// 判 断 浏览 器 类 型 
if (window. ActiveXObject) 
document. write( 本 浏览 器 是 IE 系列 浏览 器 ) ; 
else if (document. getBoxObjectFor) 
document. write( 本 浏览 器 是 Firefox 浏览 器 ) ; 
else if (window. MessageEvent ®&&. !document. getBoxObjectFor) 
document. write( 林 浏览 器 是 Chrome 浏览 器 ) ; 
else if (window. opera) 
document. write( 本 浏览 器 是 Opera 浏览 器 ) ; 
else if (window.openDatabase) 
document. write( 本 浏览 器 是 Safari 浏览 器 ; 
else 
document. write( 林 浏览 器 是 其 他 类 型 浏览 器 ) ; 
} 
/script>=body onload=judge()>=/body>=/html> 


本 程序 在 页 面 加 载 后 首先 执行 judge() 函 数 ,其 功能 是 对 浏览 器 的 信息 进行 显示 并 判断 
浏览 器 的 类 型 。 浏 览 器 的 信息 可 以 通过 浏览 器 对 象 (navigator) 中 的 属性 值 获取 。 

浏览 器 类 型 的 判断 方法 有 多 种 ,可 以 通过 浏览 器 对 象 的 程序 名 称 属性 (navigator. 
appName) 或 浏览 器 对 象 的 user-agent 头 部 属性 (navigator. userAgent) 进 行 判 断 ,但 这 种 方 
法 有 时 不 太 精 细 ; 男 一 种 方法 是 通过 不 同 浏览 器 的 不 同属 性 进行 判断 ,本 程序 就 是 使 用 第 二 
种 方法 ,其 具体 的 判断 方法 如 下 。 

(1) 对 于 IE 浏览 器 ,其 支持 创建 ActiveX 控件 ,而 其 他 浏览 器 是 不 支持 的 ,因此 它 有 一 
个 ActiveXObject 函数 ,只 要 判断 window 对 象 存 在 ActiveXObject 函数 ,就 可 以 明确 判断 
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出 当前 浏览 器 是 IE。 

(2) 对 于 Firefox 浏览 器 ,其 有 一 个 getBoxObjectFor 函数 ,用 来 获取 DOM 元 素 的 位 置 
和 大 小 ,这 是 Firefox 独 有 的 ,判断 它 即 可 知道 当前 浏览 器 是 Firefox。 

(3) 对 于 Opera 浏览 器 ,其 在 window 对 象 中 提供 了 专门 的 浏览 器 标志 , 即 window. 
opera 属性 ,通过 判断 这 个 属性 就 可 以 确定 是 否 是 Opera 浏览 器 。 

(4) 对 于 Safari 浏览 器 ,其 有 一 个 独 有 的 openDatabase 函数 ,这 个 可 以 作为 判断 是 否 是 
Safari 浏览 器 的 标志 。 

(5) 对 于 Chrome 浏览 器 ,其 有 一 个 MessageEvent 函数 ,但 此 函数 Firefox 浏览 器 也 
有 ,不 过 ,Chrome 没有 Firefox 的 getBoxObjectFor 函数 ,因此 根据 这 两 个 函数 存在 的 条 件 
可 以 准确 判断 出 是 否 是 Chrome 浏览 器 。 

(6) 如 果 以 上 判断 都 不 正确 , 则 表示 为 其 他 浏览 器 。 

显示 效果 如 图 6-3 所 示 。 本 程序 在 不 同 浏览 器 中 会 显示 出 不 同 的 值 。 


le 


> 由 DD 安 96-3.html 


浏览 器 名 称 ，Netscape 

浏览 器 版 本 ，5.0 (Windows NT 6.1; WON64) AppleWebKit/537.36 (EHTHL, like 
Gecko) Chrome/48. 0. 2564. 116 Safari/537.36 TheWorld 7 

Cookies 是 否 启用 ，true 

user-agent 头 部 ，Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537. 36 
(GKHTIL，1like Gecko) Chrome/48. 0. 2564.116 Safari/537. 36 TheWorld 7 


本 浏览 器 是 Chrome 浏 览 器 





图 6-3 在 浏览 器 中 执行 的 效果 图 


6.2.4 表单 事件 


表单 事件 就 是 对 表单 提交 时 产生 的 事件 进行 处 理 , 其 功能 是 在 提交 表单 之 前 执行 表单 
事件 指定 的 处 理 函 数 。 表 单 事件 作用 于 表单 元 素 上 ,因此 要 响应 该 事件 就 必须 在 表单 标签 
符 中 增加 onsubmit 事件 属性 ,并 设置 一 个 JavaScript 函数 作为 其 值 ,该 函数 如 果 返 回 true 
则 提交 表单 ;如 果 返 回 false 则 不 提交 表单 。 

例 6-4 下 面 是 一 个 使 用 onsubmit 事件 的 例子 ,在 本 例 中 , 当 用 户 单 击 表单 中 的 “确认 ” 
按钮 时 ,表单 事件 被 激活 ,并 调用 对 应 的 check() 函数 ,该 函数 对 表单 中 的 用 户 名 和 密码 域 
中 的 内 容 进行 判断 ,如 果 没 有 输入 值 , 则 会 给 出 提示 ,并 取消 此 次 的 提交 操作 。 如 果 用 户 名 
和 密码 都 输入 了 值 , 则 会 正确 提交 。 四 

=html><=head> 

二 title 二 > 例 6-4 一 /title> 

=script language= "javascript"> 

function check() { 

if(document. getElementByld('username'") . value 一 一 ""){ 


alert(" 请 输入 用 户 名 !"); 


document. getElementByld('username") . focus(); 








return false; 
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if(document. getElementByld('password") . value 一 一 ""){ 
alert(" 请 输入 密码 !"); 
document. getElementById(password) . focus() ; 
return false; 
} 
return true; 
} 
</script></head> 
=body>=form id= "forml" name= "forml" method= "post" action= "5-15-server. html" onsubmit= 
"return check() "> 
一 p align= "center"> &nbsp; &nbsp;=/p> 
一 p align 一 "center" 二 用 户 名 : 一 input type 一 "text" name 一 "username" id 二 "username" /一 
一 /p 二 一 p align 一 "center" 二 密 &nbsp;&nbsp 码 : 
< 所 input type= "text" name= "password" id 一 "password" /></p><p align= "center"> 
<input type= "submit" name 一 "button" id 二 "button" value 一 "提交 ” /> 
&.nbsp; &-nbsp; &-nbsp; &.nbsp; &-nbsp; -nbsp; &.nbsp; 
< 一 input type 一 "reset" name 一 "button2" id 一 "button2" value 一 " 重 置 " /二 一 /p> 
</form></body><=/html> 


本 例 中 使 用 了 表单 事件 处 理 对 输入 的 内 容 进行 判断 ,因此 在 过 form 之 标签 符 中 增加 了 
“onsubmit” 事 件 属性 。 在 事件 处 理 函 数 中 ,本 例 使 用 了 一 种 新 的 判断 方法 ,即使 用 
document 对 象 的 getElementById( ) 方 法 通过 表单 元 素 的 id 值 来 得 到 其 句柄 。 在 判断 为 空 
后 ,本 例 不 但 弹出 了 提示 对 话 框 ,还 将 输入 焦点 移 到 相应 的 文本 框 对 象 上 ,这 是 通过 调用 表 
单元 素 对 象 的 focus() 方 法 实现 的 。 

显示 效果 如 图 6-4 所 示 。 








图 6-4 表单 事件 页 面 效 果 






综合 案例 ,请 扫 一 扫 和 


es: 


课 后 练习 


1. 编写 一 个 JavaScript 程序 ,在 页 面 打 开 时 ,显示 一 个 10 行 .10 列 的 表格 。 

2. 编写 一 个 JavaScript 程序 ,在 页 面 关 闭 时 ,弹出 一 个 提示 框 。 

3. 编写 一 个 JavaScript 程序 ,在 页 面 中 有 一 个 按钮 , 单 击 后 文字 的 字体 颜色 变化 成 其 
他 颜色 。 

4. 编写 一 个 JavaScript 程序 , 当 单 击 键盘 上 的 JS 两 个 字母 时 ,页 面 弹 出 对 话 框 ,显示 
“欢迎 学 习 JavaScript”。 
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JavaScript 网 页 特效 


学 习 目 标 

了 解 用 JavaScript 进行 多 种 网 页 特效 设置 的 方式 。 

掌握 多 种 文字 特效 、 图 片 特 效 、. 时 间 和 日 期 特效 .鼠标 特效 、 菜 单 特效 与 表单 的 设置 方法 
与 效果 。 

所 谓 网 页 特效 就 是 网 页 的 各 个 元 素 (如 文字 、 图 片 动画、 声音 、 视 频 等 ) 的 特殊 效果 。 
二 二 站 机 让 同 的 网 家 元 来, 不 下 共 的 乱入 芋 直 作 的 析 灶 , 册 癌 看 南 关 天 关 庆 的 于 呆 并 和 
条 、 图 片 .漂浮 在 页 面 上 的 广告 等 。 


7.1 文字 特效 


本 节 主 要 介绍 JavaScript 网 页 文字 特效 ,主要 包括 跑马 灯 效 果 打字 效果 文字 大 小 变 
化 效果 。 


7.1.1 跑马 灯 效 果 


在 网 页 上 ,经 常会 看 到 一 段 文字 或 者 一 组 图 片 在 一 定 的 区 域 范围 内 滚动 播放 ,以 引起 浏 
览 者 的 注意 ,通常 称 之 为 “跑马 灯 ? 效 果 。 

打开 Dreamweaver 软件 ,新 建 网 页 后 ,将 下 面 例 7-1 的 代码 输入 网 页 代码 二 body 二 和 
二 /body 二 之 间 。 

例 7-1 跑马 灯 效 果 。 





oH 
=script language=javascript> 
区 

var index 一 4 

link=new Array(3); 本 
text 一 new Array(3) ; 

link[0] 王 http://www.126.com 

link[1]='http://www. 126.com' 

link[2] ='http://www. baidu. com' 

link[3] = 'http://www. sina. com' 


text[0] 一 测试 开始 ' 
text[1] 二 126 邮箱 ' 
text[2] 一 百度 搜索 ' 
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text[3] 王 新 浪 ' 








document. write (" 一 marquee scrollamount 一 和 ' scrolldelay 一 50' direction= "up' width 一 '150' height=" 
100%>")3 
for (i=0;i<index;it+ ){ 
document. write ("&nbsp;<img src 一 images/webnew. gif' width='12' height='12 ><a href 
十 link 加 十 " target==' blank>"); 
document. write (text[ 十 "</A><=br>"); 


} 

document. write ("</marquee>") 

//-> 

=/script> 

其 中 ,参数 index 定义 了 显示 的 文本 的 行 数 ;数组 link 存放 不 同行 文字 相关 链接 地 址 ; 
数组 text 存放 滚动 内 容 。 语 句 志 marquee scrollamount 王 4 scrolldelay 王 50' direction 一 "up' 
width 一 450' height 王 1400 定 中 ,参数 scrolldelay 定义 了 延迟 时 间 ,这 个 数值 越 小 ,滚动 速度 
越 快 ;direction 定义 了 方向 ;width 和 height 分 别 定义 了 滚动 范围 的 宽 和 高 。 


7.1.2 打字 效果 


在 网 页 上 ,可 以 实现 逐个 文字 出 现 的 打字 效果 ,将 下 面 例 7-2 的 代码 输入 文件 中 ,并 
保存 。 
例 7-2 打字 效果 


=<HTML> 

<HEAD> 

二 TITLE 二 打字 效果 < 过 /TITLE> 

二 SCRIPT Language= "javascript"> 

var msg 一 "欢迎 进入 JS 网 页 特效 的 学 习 "; 


var interval= 200; 





seq 一 0; 
function Scroll() 
{ 
document. tmForm. tmText. value= msg. substring(0, seg+1); 
Seq++ ; 
if ( seq 二 一 msg.length ) 
{ seq 一 0 }; 
window. setTimeout("Scroll();"，interval ) ; 
} 
</SCRIPT> 


<BODY OnLoad= "Scroll);" > 

二 FORM Name=tmForm> 

<INPUT Type= Text Name 一 tmText Size=45> 
</FORM> 

</BODY> 

</HTIML> 


其 中 ,interval 定义 了 打字 间隔 时 间 ,测试 该 文件 ,实现 的 效果 是 在 页 面 的 文本 框 中 , 显 
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示 一 段 文字 ,并 以 打字 效果 显示 。 在 网 页 中 ,通常 情况 ,打字 效果 引起 访问 者 关注 后 ,还 可 实 
现 单 击 进 入 相应 链接 的 效果 ,下 面 是 对 上 面 打字 效果 的 进一步 修改 与 完善 ,在 展示 打字 效果 
的 过 程 中 ,还 实现 了 相应 的 链接 与 跳 转 。 

打开 Dreamweaver 软件 ,新建 网 页 后 ,将 下 面 代码 输入 网 页 代码 过 head 之 和 去 /head> 之 
间 并 保存 。 


<<title> 打 字 效 果 <</title> 
二 meta http-equiv= "Content-Type" Content= "text/html;charset= gb2312" /> 





所 style type= "text/css"> 

body! 
font-size: 14px; 
font-color: # purple; 
font-weight: bolder; 

} 

</style> 


在 网 页 过 body 之 和 所 /body> 之 间 添 加 如 下 代码 : 


滚动 文字 信息 : 二 a id 王 "Hotnews" href 一 "" target 一 "_blank" 二 二 /a 
一 script language= "javascript"> 

var NewsTime= 2000; 

var TextTime 一 100; 


var newsi 一 0; 
var txti=0; 
var txttimer; // 调 用 setInterval 的 返回 值 ,用 于 取消 对 函数 的 周期 性 执行 


var newstimer; 


var newstitle 一 new Array(); 
var newshref 一 new Array(); 


newstitle[0] 二 "126 邮箱 链接 !"; // 显 示 在 网 页 上 的 文字 内 容 和 对 应 的 链接 


newshref[0]="http://www. 126.com"; 


newstitle[1] 一" 百度 搜索 !"; 


newshref[1]="http://www. baidu. com" ; 


newstitle[2] = 二 "电子 购物 !"; 


newshref[2]="https://www.ijd.com/"; 





//newstitle[3] = "http://www. baidu. com"; 
//newshref[3]="http://www. baidu. com" ; 





function shownew()1{ 
hwnewstr—= newstitle[newsi| ; // 通 过 newsi 传递 ,依次 显示 数组 中 的 内 容 
newslink 一 newshref[newsi] ; // 依 次 显示 文字 对 应 的 链接 


if(txti>=hwnewstr. length){ 
clearInterval(txttimer); / * 一 旦 超过 要 显示 的 文字 长 度 ,清除 对 shownew() 的 周期 性 调用 * / 


clearInterval(newstimer) ; 
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newsitt+ ; // 显 示 数 组 中 的 下 一 个 
it(newsi 一 一 newstitle.length)1{ 

newsi 一 0; /* 当 newsi 大 于 信息 标题 的 数量 时 ,把 newsi 清 零 ,重新 从 第 一 个 显示 * / 
} 
newstimer 一 setInterval("shownew()", NewsTime); /* 间隔 2000ms 后 重新 调用 shownew() * / 
txti=0; 
return; 


} 

clearInterval(txttimer) ; 

document. getElementById("Hotnews") . href 一 newslink; 

document. getElementByld("Hotnews").innerHTML= hwnewstr. substring(0, txti+ 1); 


// 截 取 字 符 , 从 第 一 个 字符 到 txti+1 个 字符 


txtir+ ; // 文 字 一 个 个 出 现 
txttimer= setInterval("shownew()", TextTime); 
} 


shownew(); 


=/script> 


其 中 ,参数 NewsTime 用 来 定义 每 条 信息 完整 出 现 后 停留 时 间 ;参数 TextTime 用 来 定 
义 每 条 信息 中 的 字 出 现 的 间隔 时 间 。newstitle 二 new Array() ;用 来 实现 以 数组 形式 保存 每 
个 信息 的 标题 ;newshref 二 new Array() ;用 来 实现 以 数组 形式 保存 信息 标题 的 链接 。 


7.1.3 文字 大 小 变化 效果 


很 多 网 站 上 为 了 方便 浏览 者 阅读 ,会 提供 选择 字体 大 小 的 功能 ,以 适应 不 同年 龄 段 人 和 群 
的 阅读 需求 。 默 认 字 体 大 小 可 以 通过 CSS 进行 页 面 定义 ,一 般 网 页 的 标准 字体 是 9pt, 也 就 
是 12px。 

打开 Dreamweaver 软件 ,新 建 网 页 后 .将 下 面 例 7-3 的 代码 输入 网 页 代码 中 并 保存 。 

例 7-3 文字 大 小 变化 效果 。 

=html> 

=head> 

<title 二 JavaScript 设置 网 页 字体 一 /title 二 

=style> 


body{ 
font-size: 9pt; 





} 

=/style> 

=/head> 

=body> 

去 div id 一 zoom> 这 是 一 段 示 例文 字 , 可 以 单 击 下 边 选择 不 同 字号 的 字体 ,这 段 文字 会 随即 改变 大 小 。 


</div> 
二 SCRIPT language= JavaScript> 


function doZoom( size) { 
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document. getElementById(zoom") . style. fontSize 一 size 十 'pU 

} 

</SCRIPT> 

一 P align 一 right 二 选择 字号 : [ 二 A href 王 "javascript:doZoom(13)" 二 13pt( 超 大 ) 一 /A 二 
A href="javascript:doZoom(10.5)" 之 10.5pt( 中 型 ) 二 /A 二 
二 A href 二 "javascript:doZoom(9)" 记 9pt( 标 准 ) 二 /A 二 ] 


=/body> 

=/html> 

测试 页 面 , 效 果 如 图 7-1 所 示 , 当 单 击 "选择 字号 "提示 中 的 不 同 字号 选项 时 ,网 页 上 的 
文字 大 小 也 会 随 之 改变 。 


“| Dalvsva7-3.html 只 - 0 | 和 EJavascriptiR 网 页 字体 x 
这 是 一 段 示例 文字 ， 可 以 单 击 下 边 选 择 不 同 字号 的 字体 ,这 和 仆 文 字 会 随即 改变 大 小 。 
选择 字号 : [ 13pt“ 超 大 )〉 10. 5pt《〈 中 型 ) 9pt (标准 ) ] 








图 7-1 调整 页 面 字 体 大 小 


7.2 图 片 特 效 


本 节 主 要 介绍 JavaScript 网 页 图 片 特效 ,主要 涉及 改变 页 面 中 图 片 的 位 置 . 鼠 标 拖 动 滑 
块 改 变 图 片 大 小 以 及 闪烁 的 图 片 效果 。 


7.2.1 改变 页 面 中 图 片 的 位 置 


本 节 主 要 介绍 通过 输入 新 的 位 置 数据 ,来 修改 图 片 位 置 的 方法 。 在 Dreamweaver 软件 
环境 中 新 建 网 页 ,并 保存 ,将 已 经 准备 好 的 图 片 “pic. jpg” 与 保存 的 网 页 放 在 同一 路 径 下 ,将 
例 7-4 代码 插入 网 页 中 并 保存 。 

例 7-4 改变 页 面 中 图 片 的 位 置 。 


<STYLE TYPE= "text/css"> 
< 
# moveobj {position: absolute; 
top: 10; 
left:10;} 
i 
</STYLE> 
< 一 script language= "javascript"> 
= 


function moveit(){ 
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moveTop= document. forms[0] .elements[0]. value; 
moveLeft= document. forms[0] .elements[1] .value; 
moveobj. style. top= moveTop; 
moveobj. style. left 一 moveLeft; 
让 ((moveTop> document. body. offsetHeight | | moveTop 一 0) | | (moveLeft> document. body. 
offsetWidth| | moveLeft<0)) 
moveobj. style. top= 200; 
moveobj. style. left= 300; 
} 
} 
// 一 > 
=/script> 
=form action= "javascript: moveit()"> 
一 div align= "center"> 
=p>top: 
input type= "text" size="5" name= topnum value="100"> 
left: 
input type= "text" size="5" name 一 leftnum value="200"> 
二 input type 一 submit value 一 "移动 "name 一 "submit" 二 
请 输入 新 的 位 置 二 /p> 
</div> 
=</form> 
=<div id= "moveobj"><img src 一 "pic/ pic.jpg”width 一 "215" height="180" /二 一 /div 二 


其 中 ,top: 过 input type 二 "text" size 二 "5" name 二 topnum value 一 "100" 过 定义 了 图 片 
初始 位 置 距离 网 页 顶端 的 距离 为 100;left: 二 input type 二 "text" size 二 "5" name 一 leftnum 
value 一 "200" 过 定义 了 图 片 初始 位 置 距离 网 页 左 侧 的 距离 为 200, 网 页 在 运行 过 程 中 ,分 别 
在 文本 框 中 修改 这 两 个 值 , 可 以 改变 图 片 的 位 置 。 测 试 网 页 ,得 到 如 图 7-2 所 示 效 果 。 


mre) 


SO wm 2- of 有 天 本 


入 吉 请 输入 新 的 位 置 


























图 7-2 改变 图 片 位 置 


7.2.2 鼠标 拖 动 滑 块 改变 图 片 大 小 


本 节 主 要 介绍 通过 拖 动 滑 块 来 控制 图 片 改变 大 小 的 方法 ,为 了 方便 对 比 观察 ,在 案例 中 
先 添加 一 张 原始 图 像 。 打 开 Dreamweaver 软件 ,新 建 网 页 文件 ,修改 标题 信息 为 " 拖 动 滑 块 


有 -TavaseriptrjQuery Web 交 互 程序 设计 ------------------------------------------------------ 
控制 图 片 显示 大 小 ”, 添 加 下 面 例 7-5 中 的 代码 到 过 head 之 和 过 /head> 之 间 ,用 来 定义 图 片 
显示 区 域 。 

例 7-5 鼠标 拖 动 滑 块 改变 图 片 大 小 。 


=~style> 
* {margin:0;padding:0;font-size:12px;} 


国名 






3 el 







回 


扫 一 扫 


# picViewPanel{margin:5 50 0 50px;width:500px; height:600px;overflow:auto;text-align:center; 


.btn{width:50px; height:15px; cursor: pointer;) 


border: solid 1px # ccecccc;} 

# slider{margin:0 50px;height:15px;width:500px; border: 1px solid #000000; position: relative;} 
# sliderLeft{height:13px; width:13px;float:left;border:1px solid # cccccc;cursor: pointer;} 

# sliderBlock {height: 13px; width: 50px; border: 1px solid # cccccc; position: absolute; top: 0; left: 
113px;cursor: pointer; background: # ccccccitextralign:center;} 

# sliderRight (height:13px; width:13px;float: right; border: 1px solid # cececcce;cursor:pointer;} 
</style> 


添加 下 面 代码 到 过 body 之 和 过 /body> 之 间 ,用 来 定义 图 片 显示 状态 以 及 滑 块 区 域 样式 。 


所 div id= "picViewPanel"> 
<p><img src 一 "pic/7-7.jpg"name 一 "imgl"width 一 "215"height 一 "180" id="imgl"></p> 
<p>&nbsp;</p> 
</div> 
=divid= "slider"> 
=span id= "sliderLeft" =<=<=/span> 
=span id 一 "sliderRight" 二 二 二 一 /span 二 
<span id 一 "sliderBlock" 二 一 一 二 /span 二 


</div> 

最 后 ,再 次 添加 下 面 控制 程序 代码 到 网 页 二 /html 二 命令 之 前 ,实现 对 网 页 内 图 片 的 大 
小 控制 。 

=script> 

//golbal 


var pv= null; 
var sd 一 null; 
window.onload 王 function(){ 
pv 一 new PicView("pic/7-7.jpg"); 
sd 一 new Slider( 
function(p1){ 
document. getElementByld( "sliderBlock").innerHTML=2* pl +"%"; 
pv.expand(2 * pl/100); 
} ,function(){}); 
} 
var PicView= {function(url, alt) { 
this. url= url; 
this. obj= null; 
this. alt=alt?alt: 
this. real Width= null; 
this. real Height= null; 


this.z00m=1; 
this. init(); 





PicView. prototype. init 一 function(){ 


} 


var _img 一 document. createElement("img"); 

_img. src= this. url; 

_img.alt= this. alt; 

_img. style. zo0m= this. zo0om; 

document. getElementByld("picViewPanel").appendChild(_img); 
this. obj= _img:; 

this. realWidth= _img. offsetWidth; 

this. real Height= _img. offsetHeight; 


PicView. prototype. reBind= function(){ 


} 


this. obj. style. width= this. realWidth * this.zoom 十 "px"; 
this. obj. style. height= this. real Height * this.zoom 十 "px"; 


PicView. prototype. expand= function(n){ 


} 


this.z00m=n; 


this, reBind( ); 


var Slider= function(ing, ed){ 


} 


this. block= document. getElementById("sliderBlock") ; 
this. percent=0; 

this. value=0; 

this. ing= ing; 

this. ed= ed; 

this.init(); 


Slider. prototype. init= function( ) { 


var _sx=0; 

var _cx=0; 

var o= this. block; 

var me 一 this; 

o,.onmousedown 一 function(Ce){ 
var e 一 window.event| |e; 
_sx=0.offsetLeft; 
_cx=e.clientX-_sx; 
document. body. onmousemove= move; 
document. body. onmouseup= up; 

}; 

function move(e){ 
var e 一 window.event| |e; 
var pos_x 一 e.clientX - _cx; 
pos_x 一 pos_x<<13?13 :pos_xi; 
pos_x 一 pos_x 一 248 十 15-50?248 十 15-50:pos_x; 
o.style.left 一 pos_x 十 "px"; 
me. percent= (pos_x-13)/2; 
me.ing(me. percent) ; 

} 

function upO)!{ 
document. body. onmousemove 一 function(){}; 


document. body. onmouseup= function(){}; 
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} 
} 
</script> 


执行 程序 ,运行 结果 如 图 7-3 所 示 , 拖 忠 滑 块 ,可 以 改变 区 域内 下 面 图 像 的 大 小 。 





图 7-3 改变 图 片 大 小 效果 


7.2.3 不 断 内 烁 的 图 片 


在 网 页 中 ,经 常见 到 图 片 不 断 闪烁 的 特殊 效果 ,本 节 主 要 介绍 不 断 闪烁 的 图 片 效果 的 使 
用 方式 。 关键 代码 如 图 7-4 所 示 。 





Er TGF 
zhead> 
a <body> 


5 img id="imgid" style="visibility:visible" src="pic/7-7.jpg" /> 
100 <script type="text/javascript"> 

function show(){ 

12 var imgid=document .getElementById("imgid"); 

13” | if(imgid.style.visibility 一 "visible") 


EE 
已 
a 


14 imgid.style.visibility = "hidden"; 
else 
16 imgid.style.visibility = "visible"; 
#5) 0 setrimeout('show()',100); 
| 18 } 


19 show(); 
a0 </script> 


k/boay> 
23 </html> 








辣 奇 | 
SB 





图 7-4 不 断 闪烁 的 图 片 代码 


例 7-6 不 断 的 闪烁 图 片 ,在 Dreamweaver 软件 中 新 建 空白 网 页 ,并 插入 图 像 7-7. jpg 
文件 ,修改 图 片 ID 为 “imgid”, 标 题 信息 为 “不 断 闪烁 的 图 片 ”。 代 码 如 下 : 








=html> 

=head> 

meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
二 title 二 不 断 闪 炬 的 图 片 过 /title 二 

=/head> 


body> 
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一 img src="pic/7-7.jpg" name= "imgid" id= "imgid" style= "visibility: visible" /> 
< 一 script type= "text/javascript"> 
function show(){ 
var imgid= document. getElementByld( "imgid"); 
if(imgid. style. visibility= = "visible") 
imgid. style. visibility= "hidden" ; 
else 
imgid. style. visibility= "visible" ; 
setTimeout('show()', 100); 
} 
show(); 
=/script> 
</body> 
=/html> 
通过 不 断 修改 图 片 “imgid” 的 visibility 取 值 ,来 对 图 像 的 显示 /隐藏 状态 进行 修改 ,从 
而 实现 了 图 片 不 断 闪烁 的 动态 效果 。 其 中 ,通过 setTimeout(show()",100) 语 句 来 设置 图 片 
闪烁 的 间隔 时 间 ,如 果 将 参数 100 增加 , 则 图 片 闪烁 的 频率 将 会 降低 ;如果 参数 100 减 小 , 则 


图 片 闪烁 的 频率 将 会 增加 。 
7.3 时 间 和 日 期 特效 


本 节 主 要 介绍 JavaScript 网 页 时 间 和 日 期 特效 ,主要 包括 标题 栏 显 示 分 时 问候 语 、 显 示 
当前 系统 时 间 ,以 及 星期 查询 等 功能 。 这 里 主要 使 用 到 Date 对 象 的 属性 和 方法 ,来 获得 日 
期 .时间 等 信息 ,并 将 获得 的 内 容 在 不 同位 置 显 示 出 来 。Date 对 象 主要 包含 set 和 get 两 个 
方法 ,set 用 于 设置 时 间 和 日 期 值 ,get 用 于 获取 时 间 和 日 期 值 。 


7.3.1 标题 栏 显 示 分 时 问候 语 
本 节 主 要 实现 的 是 根据 系统 时 间 的 不 同 , 在 标题 栏 中 显示 不 同 的 问候 语 ,在 Dreamweaver 


软件 中 新 建 空白 网 页 ,将 下 面 例 7-7 的 代码 插入 过 head 之 和 去 /head 之 间 。 
例 7-7 标题 栏 显示 分 时 间 候 语 。 





=script language= "javaScript"> 
I 

now 一 new Date(), hour= now. getHours() 
var msg 王 "分 时 间 候 " 

if(hour 二 6){msg 一 "凌晨 好 !"} 

else if (hour = 9){msg 一 "早上 好 !")} 
else if (hour 二 12){msg 一 "上 午 好 !")} 
else if (hour = 14){msg 一 "中 午 好 !")} 
else if (hour = 17){msg 一 "下 午 好 !"} 
else if (hour 二 19){msg 一 "傍晚 好 !")} 
else if (hour 所 22){msg 一 "晚上 好 !")} 
else {msg 一 "夜里 好 !"} 

window. document.title 一 msg 


</script> 
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其 中 ,参数 now 和 hour 分 别提 取 了 系统 日 期 与 当前 时 间 ; 参 数 msg 根据 不 同时 间 被 赋 


予 了 不 同 的 问候 语 ,根据 hour 时 间 的 不 同 取 值 ,在 窗口 的 标题 栏 中 显示 msg 的 文本 信息 。 
运行 效果 如 图 7-5 所 示 。 





| 


[Berewwmm" oocleo | 


有 夜里 好 ! 现 在 时 间 是 2 点! 








图 7-5 分 时 显示 问候 语 


图 7-5 中 页 面 内 显示 信息 ,可 以 通过 在 二 body 之 和 所 /body 之 内 添加 如 图 7-6 所 示人 代码 
来 实现 。document. write() 实 现在 网 页 中 直接 显示 文字 内 容 , document. write(" 现 在 时 间 
是 "十 hour 十 "点 1") 实 现在 网 页 中 显示 当前 时 间 。 


<script language="javaScript"> 

i 

now = new Date(),hour = now.getHours() 
if(hour < 6){document.write(" 凌 晨 好 !") } 

else if (hour < 9){document.write(" 早 上 好 !")} 
else if (hour < 12){document.write(" 上 午 好 !")} 
else if (hour < 14) fdocument.write(" 中 午 好 !")} 
else if (hour < 17) {document.write(" 下 午 好 !")} 
else if (hour < 19) {document.write ("傍晚 好 !")} 
else if (hour < 22) {document.write ("晚上 好 !")} 
else {document .write ("夜里 好 !")} 

document .write ("现在 时 间 是 "+hour+" 点 ! ") 


--> 








</script> 


图 7-6 页 面 内 提示 信息 的 代码 


7.3.2 显示 当前 系统 时 间 


可 以 通过 now 来 分 别提 取 系 统 时 间 的 时 和 分 两 个 部 分 ,但 是 需要 注意 的 是 ,提取 出 来 的 
值 都 为 数值 类 型 。 如 果 要 显示 成 如 图 7-7 所 示 的 时 间 格 式 , 可 以 添加 如 图 7-8 所 示 的 代码 。 


var msgl=now.getHours() 


夜里 好 1! 现在 时 间 是 22 点 荡 习 var mag2=now-gatMiiutaa 人 全 


document -write (String (msg1)+":"+String (msg2)) 








图 7-7 显示 当前 系统 时 间 图 7-8 显示 当前 系统 时 间 的 代码 


7.3.3 星期 查询 功能 


通过 Date 对 象 提取 系统 日 期 后 ,可 以 通过 getDay() 方 法 获得 星期 几 的 取 值 。 添 加 如 
图 7-9 所 示 的 代码 在 网 页 的 body 二 和 二 /body> 之 间 。 
执行 程序 后 ,根据 取 值 判断 ,将 在 网 页 中 显示 “今天 是 周 ※” 的 文字 信息 。 
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now = new Date() 


Var week; 
if (now.getDay ()==0) week=" 周 日 " 
if (now.getDay ()==1) week=" 周 一 " 
if (now.getDay ()==2) week=" 周 二 " 
if (now.getDay ()==3) week=" 周 三 " 
y() 二 4) week=" 周 四 " 
y() 二 5) week=" 周 五 " 
if (now.getDay ()==6) week=" 周 六 " 
document -write ("今天 是 "+week) 


图 7-9 星期 查询 功能 的 代码 









7.4 鼠标 特效 


本 节 主 要 介绍 JavaScript 网 页 鼠标 特效 , 主要 涉及 屏蔽 鼠标 右键 ,获取 鼠标 位 置 坐 标 ， 
移动 改变 鼠标 外 观 等 功能 。 


7.4.1 屏蔽 鼠标 右键 


本 节 主 要 介绍 通过 JavaScript 实现 屏蔽 鼠标 右键 的 方法 ,浏览 者 在 访问 网 页 时 就 不 能 
够 再 右 击 了 。 

例 7-8 首先 在 body 里 加 入 onmousedown 王 "rclick()"”oncontextmenu 一 "nocontextmenu 
()" ,然后 在 二 body 之 和 所 /body> 之 间 添 加 如 下 代码 。 


一 script language= "javascript"> 
= 
function rclick() 


{ 





if(document. all) { 
if (event. button 一 一 2){ 
event. returnvalue 一 false; 


} 


} 
a 
=/script> 


7.4.2 获取 鼠标 位 置 坐标 


用 JavaScript 获取 当前 页 面 上 鼠标 (光标 ) 位 置 在 许多 情况 下 都 会 用 到 ,比如 , 拖 放 、 悬 
停 提示 (tooltip) 等 。 本 节 主 要 介绍 JavaScript 获取 鼠标 位 置 的 方法 ,结合 实例 形式 详细 分 
析 JavaScript 响应 鼠标 事件 获取 并 操作 页 面 元 素 属性 的 相关 技巧 。 i] 

例 7-9 新 建 网 页 文件 ,修改 标题 为 "获取 鼠标 位 置 坐标 ”, 并 将 代码 添加 i 
到 过 body 之 和 所 /body> 之 间 。 









=script> 扫 一 扫 
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function mouseMove(ev) 
{ 
ev 一 ev || window. event; 
var mousePos= mouseCoords(ev); 
document. getElementById("xxx"). value 一 mousePos.x; 
document. getElementByld( "yyy"). value= mousePos.y; 


} 


function mouseCoords(ev) 
{ 
if(ev. pageX || ev.pageY){ 
return {x:ev. pageX, y:ev.pageY)}; 
} 
return { 
x:ev. clientX 十 document. body. scrollLeft - document. body. clientLeft, 
y:ev.clientY 十 document. body. scrollTop - document. body. clientTop 





je 
} 
document ,OnmOousemove 一 mouseMove 了 
=/script> 
鼠标 X 轴 : 


=input id 一 xxx type= text> 


鼠标 Y 轴 : 
二 input id 一 yyy type= text> 


首先 声明 event 对 象 ,无 论 移动 . 单 击 ,按键 等 ,都 会 激活 一 个 event,event 是 全 局 变量 ， 


被 存储 在 window. event 里 。 当 将 mouseMove() 函数 赋值 给 document. onmousemove， 
mouseMove 会 获取 鼠标 移动 事件 ,从 而 记录 新 的 鼠标 位 置 。 


运行 程序 ,通过 文本 框 的 方式 输出 显示 了 坐标 位 置 ,如 图 7-10 所 示 。 随 着 鼠标 的 移动 ， 


文本 框 中 的 数值 会 不 断 发 生 改变 。 








鼠标 X 轴 : [232 鼠标 Y 轴 : 加 


图 7-10 提取 鼠标 位 置 


7.4.3 移动 改变 鼠标 外 观 


在 网 页 中 ,经 常会 看 到 当 鼠 标 移动 到 某 个 元 素 的 区 域 上 ,鼠标 指针 改变 原 有 样式 ,这 一 


节 介绍 一 下 这 个 效果 的 实现 方式 。 打 开 Dreamweaver 软件 ,插入 2 行 1 列 , 宽 200 像素 的 
表格 ,并 居中 在 第 一 行 中 插入 图 像 文件 7-7. jpg, 预 览 网 页 效果 如 图 7-11 所 示 。 


例 7-10 “将 如 下 代码 添加 到 二 head 之 和 到 /head> 之 间 , 实 现 单 击 隐藏 菜单 。 


一 script language 一 "javascript”type 一 "text/javascript" 二 // 实 现 单 击 隐藏 
function menuChange(obj,menu) 
{ 


if(menu. style. display= = "none") 


{ 





menu. style. display 
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EX) 


SERIES 





图 7-11 网 页 初始 状态 
} 


else 


{ 
menu. style. display= "none"; 
} 
} 
=</script> 


修改 图 片 所 在 行 代码 ,如 下 所 示 : 


tr style= "cursor:crosshair"> 


一 td onmouseover= "this. className= menu_title2';" onmouseout= "this. className 一 "menu_ 


title' "onclick 一 "menuChange(this, menul);"> 


< 一 img src= "pic/7-7. jpg" name="imgl" width="200" height="200" id 一 "imgl"” style= 
"cursor:hand"/ 二 二 /td 二 
</tr> 


其 中 ,通过 style 二 "cursor:crosshair" 语 句 , 对 在 该 行 范围 内 鼠标 指针 样式 进行 了 重新 
定义 。 当 今 多 数 浏 览 器 支持 如 图 7-12 所 示 的 指针 样式 ,希望 鼠标 指针 移动 到 某 个 元 素 上 改 
变 鼠 标 指针 样式 ,只 需 将 鼠标 指针 在 这 个 元 素 的 样式 里 加 上 cursor: (样式 名 称 ) 即 可 。 案 例 
FP 将 鼠标 指针 样式 定义 为 crosshair 样式 。 





bd 








1 auto 中 move he no-drop 中 col-resize 
a ; . 
sr all-scroll Cw] pointer © not-allowed 让 row-resize 
十 crosshair RE progress 4 e-resize mm ne-resize 
R default I text 1 n-resize ~ nw-resize 
N? help mi vertical-text 1 s-resize ~ se-resize 
I inherit 时 wait + Ww-resize 0 Sw-resize 
图 7-12 鼠标 指针 样式 
为 第 二 个 单元 格 添加 如 下 代码 : 
=td 二 二 div class="sec menu" id="menul" style="display :none ;"> 
… 菜 单一 … 


</div></td> 
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实现 了 单 击 图 片 后 弹出 菜单 的 效果 。 如 图 7-13 所 示 ,鼠标 指针 移动 到 图 片上 方 时 , 显 
示 成 “十 "状态 , 单 击 后 弹出 菜单 ,再 次 单 击 时 ,隐藏 菜单 。 
Eee -| 


| roov omm Pp- OSsamee | 





图 7-13 改变 鼠标 指针 样式 并 弹出 菜单 
7.5 菜单 特效 


本 节 主 要 介绍 JavaScript 网 页 菜单 特效 , 主要 涉及 左 键 弹出 菜单 .下 拉 菜 单 、 滚 动 菜单 
控制 等 功能 。 


7.5.1 左 键 弹出 菜单 


例 7-11 打开 Dreamweaver 软件 ,新 建 空 白 网 页 ,将 代码 添加 到 二 body 之 和 二/body> 之 间 。 


< 一 script language= "javascript"> 
document. onclick= popUp 
function popUp() { 


newX= window. event. x 十 document. body. scrollLeft 








newY=window.event.y + document. body. scrollTop 
menu= document. all. itemopen 
if ( menu. style. display= =""){ 
menu. style. display= "none" 
} 
else { 
menu. style. display 一 "" 
} 
menu. style. pixelLeft 一 newX - 50 
menu. style. pixelTop 一 newY - 50 
} 
</script> 
=table id= "itemopen" class="box" style= "display:none"> 
过 tr 之 过 td 宇 过 a href 一 "# ”class 一 "cc" 二 弹出 菜单 一 一/a> 王 /td>> 二 /tr 
到 tr 世 td>> 王 a href 一 " 井 "” class 一 "cc" 二 弹出 菜单 二 二/a>> 二 /td>> 二 /tr> 
<tr>><td><a href 一 "# ”class 一 "cc" 过 弹出 菜单 三 </a><</td><</tr> 
<tr><<td>><a href 一 "#" class 一 "cc" 盖 弹出 菜单 四 天/a>><</td>><</tr> 
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=/table> 


其 中 ,JavaScript 部 分 用 来 定义 弹出 效果 :页面 内 过 table 之 和 过/table 之 之 间 用 来 设置 
显示 的 菜单 内 容 。 执 行 效果 如 图 7-14 所 示 。 


| Ie x | 
ES pov ev nnm PD- Oem | 
| i 
i ee 





图 7-14 左 键 弹出 菜单 


7.5.2 下 拉 菜 单 


例 7-12 在 网 页 中 ,下 拉 菜 单 是 经 常 使 用 的 一 种 页 面 效 果 。 在 网 页 二 head 之 和 二 /head> 
之 间 添 加 如 图 7-15 所 示 的 代码 ,来 定义 菜单 样式 与 显示 隐藏 样式 。 





<style type="text/css"> 


font: normal 1lpx verdana; 


margin: 0 

padding: 07 

list-style: none; 

width: 150px; /* Width of Menu Items * 
border-bottom: lipx solid #ccc; 

} 

ul 1if 

position: relative; 

} 

liuf 

position: absolute; 

left: 149px; /* Set lpx less than menu width */ 
top: 0; 

display: none; 


} 


mm 


or Menu Items */ 


display: block; 

text-decoration: none; 

color: #777; 

background: #fff; /* IE6 Bug */ 

padding: Spx; 

border: 1lpx solid #ccc; /* IE6 Bug * 
border-bottom: 0; 

} 

/™ Holly Hack. IE Requirement \*/ 

* html ul 1i { float: left; height: 1%; } 
* html ul li a { height: 1%; } 

J Ei 业 / 

li:hover ul, li,.over ul { display: block; } /* The magic + 
-- 阔 /style> 








图 7-15 菜单 样式 定义 的 代码 
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在 二 head 二 和 二 /head 二 之 间 继 续 添加 如 下 代码 ,实现 对 菜单 列表 的 控制 。 


=script language= "javascript"> 
//JavaScript Document 
startList=function() 
{ 
if (document. all& &.document. getElementByld) 
{ 
navRoot= document. getElementByld( "nav"); 
for (i=0; i<navRoot. childNodes. length; i++) 
{ 
node= navRoot. childNodes; 
让 (node.nodeName 一 一 "LI") 
{ 
node.onmouseover 一 function() 
{ 
this, className 十 一 ”over"; 
} 
node. onmouseout= function() 
{ 
this. className= this. class Name. replace( "over"”, ""); 


} 


} 
} 
window. onload= startList; 
二 /Script 二 


同时 ,在 壹 body 之 和 所 /body 之 之 间 添 加 如 图 7-16 所 示 代 码 , 设 置 菜 单 内 容 , 并 暂时 设 
定 了 菜单 空 链接 跳 转 。 

运行 程序 ,执行 效果 如 图 7-17 所 示 , 当 鼠标 指针 悬 停 在 主 菜单 上 时 ,会 显示 出 下 一 级 菜 
单 内 容 , 单 击 菜单 选项 可 进行 空 链接 跳 转 。 


<ul id="nav"> 

<1i><a href="#"> 主 页 </a></1i> 
<1i><a href="#"> 关 于 我 们 </a> 
<ul> 

<1i><a href="#"> 公 司 文化 </a></1i> 
<1i><a href="#"> 公 司 团队 </a></1i> 
<1i><a href="#"> 公 司 业务 </a></1i> 
</ul> 

</1i> 一 一 一 一 一 一 
<1i><a href="#"> 公 司 服务 </a> | 


<ul> 

i |e evs inm Pp-o 
<1i><a href="#"> 网 络 运营 </a></1i> 
<1i><a href="#"> 历 史记 录 </a></1i> 主页 
<li><a href="#"> 经 典 案例 </a></1i> 


<1i><a href="#"> 案 例 展示 </a></1i> 关于 我 们 

A 公司 服务 网 站 设计 
</1i4| — ed 
<1i><a href="#"> 联 系 我 们 </a> 联系 我 们 网 络 运营 


<ul> 历史 记录 
<1i><a href="#"> 欧 洲 </a></1i> - 


<1i><a href="#"> 法 国 </a></1i> 














<li><a "> 美国 </a></1i> 
<li><a href="#"> 澳 大 利 亚 </a></1i> 
</ul> 

</1i> 

</ul> 





图 7-16 设置 下 拉 菜单 内 容 的 代码 图 7-17 下 拉 菜 单 运 行 效果 
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7.5.3 滚动 菜单 


本 节 主 要 介绍 网 页 特效 中 的 滚动 菜单 效果 。 如 图 7-18 所 示 ,鼠标 悬 停 在 某 一 层 主 菜 单 
后 ,打开 不 同 分 类 菜单 ,可 以 进行 菜单 项 选择 。 
例 7-13 ”首先 ,在 二 head 之 和 二 /head 盖 中 添加 如 下 代码 ,进行 样式 定义 。 


5 | 


SO ewesrm o-olemme | 








图 7-18 滚动 菜单 效果 扫 一 扫 


style type 一 "text/css" 二 
body{ 
margin: 10px; 
padding:10px; 


:link { text-decoration: none;color: blue} 


} 
a 
a:active { text-decoration:blink} 
a:hover { text-decoration: underline; color: red} 
a:visited { text-decoration: none;color: green} 
body, td, div, span, li{ 
font-size: 12px; 
} 
:title01 . title02{ 
color: #00b; 
font-weight: bold; 
} 
# DoorP{ 
width:200px; 
height: 300px; 
padding:0px; 
background: # FFFCF?; 
overflow: hidden; 
} 
.title011{ 
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width:100% ; 
height:25px; 
background: # FFFCF?; 
cursor: pointer; 

} 

. title02{ 
width:100% ; 
height:25px; 
background: # FFFCF?2; 
cursor: pointer; 

} 

.2Z2]s__net{ 
background: # FFFCF2; 
border-bottom:2px solid # fff; 
overflow: hidden; 
color: #666; 
padding-left:4px; 
padding-right: 4px; 
line-height: 18px; 

} 

.Www_zzjs_net { 
width:202px; 

} 

.Www_zzjs_net .bl, .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { 
font-size: 1px; 
display: block; 
background: # FFFCF2; 

overflow: hidden; 

} 

.Www_zzjs_net .bl, .www_zzjs_net .b2, .www_zzjs_net .b3 { 
height:1px; 

} 

.Www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { 
background: # FFFCF?2; 
border-left:1px solid #C7BC98; 
border-right:1px solid # C7BC98; 

} 

.Www_zzjs_net .bl { 
margin:0 4px; 
background: # C7BC98; 

} 

.Www_zzjs_net .b2 { 
margin:0 2px; 
border-width:0 2px; 

} 

.Www_zzjs_net .b3 { 
margin:0 1px; 

|, 

.www_zzjs_net .b4 { 
height:2px; 
margin:0; 

} 


.Www_zzjs_net .cl { 


margin:0 5px; 
background: # C7BC98; 

} 

.Www_zzjs_net .c2 { 
margin:0 3px; 
border-width:0 2px; 

} 

.Www_zzjs_net .c3 { 
margin:0 2px; 

} 

.Www_zzjs_net .c4 { 
height:2px; 
margin: 0 1px; 

} 

.Www_zzjs_net .zzjs_net { 
display:block; 
background: transparent; 
border-left: 1px solid #C7BC98; 
border-right:1px solid #C7BC98; 
font-size:0., 9em; 
text-align:justify; 

} 

</style> 
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其 次 ,在 过 body 之 … 去 /body 之 中 ,添加 如 下 代码 ,来 实现 鼠标 指针 经 过 时 可 以 进行 判 
断 和 选择 。 所 table 之 … 反 /table 之 中 的 内 容 为 网 页 页 面 呈 现 静 态 文本 等 内 容 , 其 后 的 


JavaScript 代码 实现 了 交互 功能 。 


<div class 一 "www_zzjs_net" 二 
<b class 一 "bl cl"></b> 








<b class="b2 c2"></b> 
<b class="b3 c3"></b> 
<b class="b4 c4"></b> 


一 div class= "zzjs_net"> 
=div id="DoorP"> 
二! 一 设置 显示 内 容 一 二 

=table> 

<tr> 

=td align= "center"> 

菜单 一 

</td> 

</tr> 
=/table> 


一 div class= "zzjs__net" align= "center"> 








过 a href 一 "# "之 分 类 1-1 二 /a 这 二 br/ 汪 分 类 1-2 过 br/ 分 类 1-3 过 br/> 
=/div> 

一 b class="b1"><=/b> 

一 b class="b2"></b> 





<b class="b3"></b> 

<b class="b4">></b> 
=table> 
<tr> 
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td align= "center"> 
菜单 二 
</td> 
</n> 
=/table> 
div class="zzjs__net" align= "center"> 


二 a href=="# "记分 类 2-1 二 /a 这 二 br/ 放 分 类 2-2 二 br/ 汪 分 类 2-3 二 br/ 二 





</div> 
ss 一 "bl" 之 <</b> 
b2">></b> 
b3">></b> 
b4" 盖 一 /b> 
=table> 
> 
< 一 td align= "center"> 
菜单 三 
</td> 
</tr> 
=/table> 


二 div class="zzjs__net" align= "center"> 
过 a href 一 "# "之 分 类 3-1</a>><<br/ 之 分 类 3-2<<br/ 二 分 类 3-3<br/> 








</div> 

</div></div> 
<b class="b4 c4"></b> 
<b class="b3 c3"></b> 
<b class="b2 c2"></b> 
<b class 一 "bl cl"></b> 





去 !-- 设 置 互动 效果 -一 
一 script type= "text/javascript" > 
var open 一 2; 
var openState 一 new Array(); 
var closeState 一 new Array() ; 
var dH 王 220; 
function $ (id){ 
if( document. getElementByld(id)) 
{ 
return document. getElementByld(id); 
} 
else 
{ 
alert(" 没 有 找到 !"); 
} 
} 
function $ tag(id, tagName){ 
return $ (id).getElementsByTagName(tag Name); 
} 
function closeMe(Cid, Oid)!{ 
var h= parselnt(Ds[Cid]. style. height) ; 
//alert(h); 
ii(h > 2) 
{ 
h=h- Math. ceil(h/3); 
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Ds[Cid] . style. height=h+t+ "px"; 
} 
else 
{ 
openMe( Oid); 
clearTimeout(closeState[Cid] ) ; 
return false; 
} 
closeState[Cid] = setTimeout("closeMe( "Cid 十", "二 Oid 十 ")"); 
} 
function openMe(COid){ 
var h 一 parseInt(Ds[Oid] . style.height) ; 
//alert(h); 
if(h = dH) 
{ 
h=h 十 Math.ceil((dH-h)/3); 
Ds[Oid] . style. height=h++ "px"; 
; 
else 
{ 
clearTimeout(openState[Oid] ); 
return false; 
} 
openState[Oid] = setTimeout("openMe(" 十 Oid 十 ")"); 
} 
var Ds= $ tag("DoorP", "div"); 
var Ts 一 $ tag("DoorP", "table" ) ; 
if(Ds. length != Ts. length) 
{ 
alert(" 标 题 和 内 容 数 目 不 相同 !"); 
} 
for(var i=0 ; i < Ds.length ; i++) 
{ 


if(i= =open) 


Ds[i] .style. height= dH++ "px"; 
Ts[i].className= "title01"; 


Ds[i] .style. height= "0px"; 
Ts[i] .className= "title02"; 


Ts[] .value=i; 





Ts[i] .onmouseover= function(){ 
if(open= = this. value) 
{ 
return false; 
} 
Ts[open| .className 一 "title02" ; 
Ts[this. value] .className 一 "title01"; 
for(var i=0 ; i < openState. length ; i++) 


{ 
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clearTimeout(openState[i] ); 
clearTimeout(closeState[1] ); 
} 
closeMe( open, this. value) ; 
//openMe( this. value) ; 
open=this. value; 
} 
} 
function showDiv(id){ 
Ds[id] . style. height=dH+ "px"; 
Ds[open] . style. height 一 "0px"; 
open 一 id; 
} 
<=/script> 


7.6 表单 特效 


本 节 主 要 介绍 JavaScript 网 页 表单 特效 ,主要 涉及 控制 用 户 输入 字符 个 数 , 设 置 单 选 按 
钮 ,设置 复 选 框 ,设置 下 拉 菜 单 等 功能 。 

表单 是 一 个 由 文本 和 表单 域 组 成 的 集合 ,是 为 Internet 网 络 用 户 在 浏览 器 上 建立 一 个 交 
互 接口 ,使 Internet 网 络 用 户 可 以 在 这 个 接口 上 输入 自己 的 信息 ,然后 使 用 “提交 ”按钮 ,将 
Internet 网 络 用 户 的 输入 信息 传送 给 Web 服务 器 。 每 个 表单 由 一 个 表单 域 和 若干 个 表单 元 素 
组 成 ,所 有 表单 元 素 要 放 到 表单 域 中 才 会 生效 。 表 单 标签 是 二 form> ,主要 元 素 有 文本 . 单 选 
按钮 、 复 选 框 ,列表 /菜单 . 跳 转 菜单 .图 像 域 ,按钮 .标签 等 ,根据 页 面 需要 进行 选择 使 用 。 


7.6.1 控制 用 户 输入 字符 个 数 


二 textarea 记 是 常用 表单 元 素 之 一 ,主要 进行 文本 信息 的 输入 。 在 网 页 中 ,经 常会 看 到 有 
些 地 方 需要 浏览 者 输入 文本 信息 ,而 且 输 入 字符 数量 有 一 定 的 限制 ,本 节 介 绍 的 是 对 用 户 输入 
字符 个 数 进行 限制 的 一 种 方法 。 打 开 Dreamweaver 软件 ,新建 网 页 。 对 于 长 度 的 判断 ,分 别 为 
对 最 大 字符 数 判断 ,针对 字符 和 汉字 进行 判断 ,以 及 对 于 文字 超出 限制 长 度 时 进行 约束 。 

例 7-14 ”将 如 下 代码 插入 过 head 之 和 所 /head> 之 间 , 用 来 实现 对 内 容 的 长 国 8 
度 判断 与 约束 。 

二 title 二 限制 表单 输入 长 度 二 /title 二 

=script> 


function lengthLimit(elem, showElem, max){ 





var elem 一 document. getElementByld( elem); 

var showElem= document. getElementById(showElemy) ; 

var max 一 max || 50; // 最 大 限度 字符 ,汉字 按 两 个 字符 计算 

function getTextLength(str){ // 获 取 字 符 串 的 长 度 ,一 个 汉字 为 2 个 字符 
return str. replace(/["\x00-\x{f{|/g, "xx"). length; 

}; 

// 监 听 textarea 的 内 容 变 化 

if(/msie (\d+\.\d)/i.test(navigator. userAgent) 一 一 true) { // 区 分 浏览 器 


elem. onpropertychange= textChange; 
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}else{ 
elem.addEventListener("input", textChange, false); 
} 
function textChange(){ // 内 容 变化 时 的 处 理 
var text= elem. value; 
var count 一 getTextLength(text) ; 
if(count > max)1{ // 文 字 超 出 ,截断 
for(var i=0; i<text. length; i++){ 
if(getTextLength(text. substr(0, )) >=max){ 
elem. value= text. substr(0, D); 
break; 


} 
} 
else{ break; 
于 
js 
textChange() ; // 加 载 时 先 初 始 化 
}; 
</script> 


在 过 body 之 和 过/body> 之 间 添 加 如 下 代码 ,显示 页 面 内 必要 信息 ,实现 对 前 面 判断 的 引用 。 


=form id= "forml" name= "forml" method= "post" action=""> 
< 一 table width="500" border="0" cellspacing= "0" cellpadding= "0"> 
<tr> 


二 td width 二 "98" 二 留言 之 /td 二 
二 td width="402"><=textarea name= "textarea" cols="50" rows="5" id 一 "commentText "> 
< /textarea><=/td> 
</t> 
<tr> 
td> &nbsp;=/td> 
二 td 二 最 多 输入 20 个 汉字 或 者 40 个 字符 二 /td 二 
</tr> 
=/table> 
一 div id 一 "dsa" 二 二 /div 二 
一 script type= "text/javascript" > 
lengthLimit("commentText", "dsa", 40); 
=/script> 
=</form> 


运行 程序 ,执行 效果 如 图 7-19 所 示 , 当 输入 内 容 达到 指定 字符 数 时 ,不 能 再 继续 添加 内 容 。 


Os rs， ocean “BY 


最 多 输入 20 个 汉字 或 者 40 个 字符 12345678910 














最 多 输入 20 个 汉字 或 者 40 个 字符 





图 7-19 控制 用 户 输入 字符 个 数 
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7.6.2 设置 单 选 按钮 


单 选 按钮 在 网 页 中 是 比较 常用 的 一 类 表单 元 素 ,通过 遍历 单 选 按钮 组 所 有 选项 ,确定 被 
选择 的 选项 ,提取 选项 内 容 , 并 通过 对 话 框 反 馈 选 项 内 容 信息 。 

例 7-15 将 如 下 代码 添加 在 二 head 和 二 /head 过 之 间 , 实 现 对 按钮 发 送 事件 的 定义 ， 
获得 选项 取 值 。 i 





=script language= "javascript"> 
function getChoice(){ 
var oForm= document. forms["myForm]1"]; 
var aChoice=oForm. camera; 扫 一 扫 
for(i=0;i<aChoice. length;i++ ) 
\if(aChoice[] ,checked) 
break; 
alert(" 您 使 用 的 相机 品牌 是 : "十 aChoice[. value); 
} 
function setChoiceCiNumy){ 
var oForm= document. forms["myForm]1"]; 
oForm. camera[iNum] .checked= true; 
} 
</script> 


在 二 body 之 和 二/body 之 之 间 设 置 如 下 代码 ,设置 页 面 显示 内 容 。 其 中 ,通过 语句 
onClick 王 "getChoice();" ,实现 单 击 按钮 时 调用 前 面 二 head 之 和 所 /head 二 中 getChoice() 。 


<form method= "post" name="myForml" action=""> 
二 p 二 您 喜欢 的 相机 品牌 二 /Pp 
<p> 


=input type= "radio" name= "camera" id= "canon" value="Canon"> 
=<label for="canon">Canon< /label> 

/p> 

<p> 

=input type= "radio" name= "camera" id= "nikon" value= "Nikon"> 
<label for="nikon"> Nikon< /label> 
</p> 

<p> 

过 input type= "radio" name= "camera" id 
=label for="sony">SONY< /label> 
</p> 
p> 
=input type 
一 label for="pentax"> Tentax< /label> 

</p> 

=<p> 

到 input type 二 "button"” value 一 "检查 选中 对 象 " onClick 一 "getChoice();" 
一 input type 一 "button" value 一 "设置 为 Canon”onClick 一 "setChoice(0);" 僵 
</p> 

=</form> 


sony" value= "Sony"> 


="radio" name= "camera" id= "pentax" value="Tentax"> 
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运行 程序 ,执行 结果 如 图 7-20 所 示 ,选择 某 一 项 时 , 单 击 “ 检 查 选中 对 象 ” 按 钮 ,提取 单 
选 按钮 选项 内 容 信 息 , 并 弹出 反馈 对 话 框 。 单 击 “ 设 置 为 Canon” 按 钮 时 ,无 论 原来 选 的 是 哪 
一 项 ,都 将 设置 Canon 单 选 按钮 为 被 选中 状态 














(I® 贸 ] DAalys\eN7-15.html 有 几 ~- G | 鳄 设 告 单 选 技 钮 








您 喜欢 的 相机 品牌 | 条 上 


图 Canon 


人 A sumanasse : canon 


O Nikon 


O soNY 


ee Cw |] 
检查 选中 对 象 || 设置 为 Canon 


























图 7-20 设置 单 选 按 钮 


7.6.3 设置 复 选 框 


复 选 框 在 网 页 中 有 大 量 应 用 ,通常 会 看 到 有 一 些 选项 信息 中 ,可 以 同时 选中 多 个 选项 ， 
这 需要 对 表单 复 选 框 元 素 进 行 设置 。 
例 7-16 打开 Dreamweaver 软件 ,将 如 下 代码 添加 到 二 body 宝 和 二/body 二 之 间 。 


=table border="1"> 
<tr> 
=th><input type= "checkbox" class= "choose-all-input" onclick= "clickChooseAllInput 
()" checked= "checked" style= "display:none"/> 
选择 二 /th 二 
< 到 th> 学 号 二 /th> 
二 th 二 姓名 二/th 
二 th 二 班级 二 /th 
</tr> 
<tr> 
=td><input type= "checkbox" class= "choose-single" />=/td> 
=<td>001</td> 
<<td> 张 三 <</td> 
二 td 二 李 四 二 /td 二 
</tr> 
<tr> 
<td><input type= "checkbox" class= "choose-single" /></td> 
<td>002</td> 
<td>F20</td> 
<td>F20</td> 
< 
=/table> 
二 button onclick 一 "clickChooseAllBtn()" 二 全 选 一 /button 二 
二 button onclick 一 "clickChooseReverse()" 二 反选 一 /button 二 
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=</body> 
一 script type= "text/javascript"> 
var chooseAllInputEle= document. getElementsByClassName( "choose-all-input") [0]; 
var chooseSingleEles= document. getElementsByClass Name( "choose-single" ) ; 
function clickChooseAllInput() { 
if (chooseAllInputEle. checked) { 
choose( "selected"); 
} else { 
choose(""); 
} 
} 
function clickChooseAllBtn() { 
chooseAllInputEle. checked= "checked" ; 
choose( "selected" ); 
} 
function choose(status) { 
for (var i=0; i < chooseSingleEles. length; i++) { 
chooseSingleEles[i] .checked= status; 


} 


function clickChooseReverse() { 
for (var i=0; i < chooseSingleEles. length; i++) { 
if (chooseSingleEles[i] .checked) { 
chooseSingleEles[i] .checked=""; 
} else { 
chooseSingleEles[i] .checked= "checked"; 


} 
} 
</script> 


其 中 ,在 “选择 ”单元 格 中 的 复 选 框 并 没有 显示 出 来 ,通过 style= 二 "display:none" ,实现 
对 标题 行 复 选 框 的 隐藏 。 

运行 程序 ,执行 结果 如 图 7-21 所 示 , 当 单 击 “ 全 选 ” 按 钮 时 ,上 方 复 选 框 可 同时 被 选中 多 
项 ; 当 单 击 “ 反 选 ” 按 钮 时 ,原来 选择 的 复 选 框 被 取消 ,原来 没有 选择 的 复 选 框 被 选择 。 
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图 7-21 设置 复 选 框 
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7.6.4 设置 下 拉 菜 单 


下 拉 菜 单 中 最 重要 的 莫 过 于 访问 被 用 户 选中 的 选项 ,对 于 单 选 下 拉 菜 单 可 以 通过 
selectedIndex 属性 轻松 地 访问 到 选项 。 

例 7-17 在 二 head 二 … 二 /head 二 中 ,添加 如 下 代码 ,设置 提示 信息 。 

=script language= "javascript"> 


function checkSingle( ){ 
var oForm= document. forms["myForm]1"]; 





var oSelectBox= oForm. constellation; 
var iChoice= oSelectBox. selectedIndex; // 获 取 选 中 项 
alert(" 您 选中 了 : "十 oSelectBox.options[iChoice] .text) ; 

} 

=/script> 


其 中 ,通过 oSelectBox. options [iChoice]. text 来 获得 选项 取 值 。 在 二 body 二 ... 
去 /body 之 中 添加 如 下 代码 ,设置 页 面 显示 内 容 与 交互 。 


二 form method 王 "post" name 一 "myForml"” action=""> 
=table width 一 "200"”border 一 "0"” cellspacing= "0" cellpadding= "0"> 
<tr> 
二 td 记过 p 请 选择 城市 


=select id= "constellation" name= "constellation"> 
所 option value="Aries" selected 一 "selected" 二 北京 二 /option 二 
二 option value 一 "Taurus" 二 上 海 二 /option 一 
二 option value 一 "Gemin" 二 天 津 二 /option 二 
二 option value 一 "Leo" 二 深圳 二 /option 二 
< 一 option value 一 "Virgo" 二 内 蒙古 二 /option 二 
</select> 
</p></td> 
</tr> 
<tr> 
< 到 td 字 一 input type 一 "button" value 一 "查看 选项 ” onclick 一 "checkSingle();" /这 二 /td 
/Wi 
=/table> 
<p> &nbsp;</p> 
=</form> 


执行 程序 ,运行 结果 如 图 7-22 所 示 , 通 过 下 拉 菜 单 选择 内 容 后 , 单 击 “查看 选项 ”按钮 ， 
会 弹出 提示 框 ,反馈 选择 的 内 容 。 





综合 案例 ,请 扫 一 扫 





课 后 练习 

1. 编写 一 个 JavaScript 程序 ,获取 前 天 .昨天 、 今 天. 明天、 后 天 和 大 后 天 的 日 期 ,并 展 
现在 网 页 中 ,页 面 内 容 如 图 7-23 所 示 。 

2. 编写 一 个 JavaScript 程序 ,实现 复 选 框 的 全 选 、 全 不 选 以 及 反选 功能 ,网 页 呈现 效果 
如 图 7-24 所 示 。 
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图 7-22 设置 下 拉 菜单 
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: 2017-7-21 

: 2017-7-22 

: 2017-7-23 

: 2017-7-24 
后 天 : 2017-7-25 
大 后 天 : 2017-7-26 





图 7-23 获取 日 期 
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图 7-24 设置 复 选 框 
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jQuery 基础 


学 习 目 标 
了 解 jQuery 的 概念 。 
掌握 jQuery 的 操作 。 


8.1 jQuery 概述 
8.1.1 jQuery 简介 


jQuery 的 起 源 要 从 JavaScript 说 起 。JavaScript 是 网 景 公司 在 它 自己 的 LiveScript 基 
础 上 产生 的 。JavaScript 的 出 现 是 前 台 脚 本 语言 发 展 的 一 个 里 程 碑 。 它 是 一 种 基于 对 象 的 
事件 驱动 的 解释 的 语言 。 它 的 实时 性 、 跨 平台 、 开 发 使 用 简单 并 且 相 对 安全 的 特点 决定 了 它 
在 Web 前 台 设 计 中 的 重要 地 位 。 

但 是 , 随 着 浏览 器 种 类 的 推陈出新 ,JavaScript 的 兼容 性 受到 了 挑战 。 对 前 台 设计 效果 
的 要 求 越 来 越 高 ,于 是 ,JavaScript 语言 本 身 的 设计 能 力 变 得 捉襟见肘 。2006 年 ,美国 人 
John Resig 创建 了 JavaScript 的 另 一 个 框架 , 它 就 是 jQuery。 

与 JavaScript 相 比 ,jQuery 更 简洁 ,浏览 器 的 兼容 性 更 强 ,语法 更 灵活 ,一 个 $ 符号 就 可 
以 遍历 文档 中 的 各 级 元 素 。 

下 面 通过 “隔行 变色 的 表格 "来 具体 说 明 jQuery 的 优势 。 

页 面 中 经 常会 遇 到 各 种 各 样 的 数据 表格 ,例如 ,学 校 的 人 员 花 名 册 ,公司 的 年 度 收 入 报 
表 , 股 市 的 行情 统计 ,等 等 。 当 表格 的 行列 都 很 多 ,并 且 数 据 量 很 大 时 ,单元 格 如 果 采 用 相同 
的 背景 色 ,用户 在 实际 使 用 时 会 感到 凌乱 。 通 常 的 解决 办 法 就 是 采用 隔行 变色 ,使 得 奇数 行 
和 偶数 行 的 背景 颜色 不 一 样 , 达 到 数据 一 目 了 然 的 目的 ,效果 如 图 8-1 所 示 。 





六 Css 实现 帮 行 变色 的 去 将“x 
$ 3 © D file///D/jquery8/8-1.html 








起 由 时 研 你 地 点 。 研修 内 容 。 课时 


2001 。 | 3 京 WEX 学 | 总 阁下 技 | o0 





2002 。 | 中 央 美 院 大 。 | MAYA 课 程 培训 | 180 
































图 8-1 隔行 变色 效果 图 
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对 于 纯 CSS 页 面 ,要 实现 隔行 变色 的 效果 ,通常 是 给 偶数 行 的 一 tr 二 标签 添加 上 单独 的 
CSS 样式 ,代码 如 下 : 


tr class="altrow"> 


而 奇数 行 保持 表格 本 身 的 背景 颜色 不 变 , 完 整 代码 如 例 8-1 所 示 。 
例 8-1 CSS 实现 隔行 变色 的 表格 。 





=html> 
=head> 
<title>CSS 实现 隔行 变色 的 表格 二 /title 二 
<~style> 
,datalist{ 


border:1px solid #007108; 
font-family: Arial; 
border-collapse: collapse; 
background-color: # d9ffde; 
font-size: 14px; 
} 
.datalist th{ 
border:1px solid #007108; 
background-color: # 00a40c; 
color: # FFFFFF:; 
font-weight: bold; 
padding-top:4px; padding-bottom:4px; 
padding-left:12px; padding-right:12px; 
text-align: center; 
} 
.datalist td{ 
border:1px solid #007108; 
text-align: left; 
padding-top:4px; padding-bottom:4px; 
padding-left:10px; padding-right:10px; 
} 
.datalist tr. altrow{ 
background-color: # a5e5aa; 
} 
=/style> 
=/head> 
<body> 
=table class= "datalist" summary= "list of members in EE Studay" id= "oTable"> 
<tr> 
一 th width 一 "144" scope 二 "col" 之 起 止 时间 达 /也 之 
二 th scope 一 "col" 二 研修 地 点 二 /th 二 
二 th scope 一 "col" 二 研修 内 容 一 /th 二 
< 一 th scope 一 "col" 二 课时 一 /th> 
二 th scope 一 "col" 二 考核 结果 一 /th 
</tr> 
<tr> 二 ! 一 奇数 行 一 二 
<td>2001</td> 
过 td width 二 "299"<p 过 北京 师范 大 学 </p 二 </td 二 
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一 td width 一 "292" 盖 一 p 二 青年 教师 职业 技能 培训 二 /p> 
</td> 

<td width="151"><p>90</p></td> 

过 td width 一 "134" 二 一 pb 二 合格 一 /p>> 一 /td> 


</tr> 
~tr class="altrow"> 二 ! 一 偶数 行 -> 
<td>2002</td> 


过 td width 一 "299" 二 一 p 二 中 央 美 院 一 /p>> 一 /td 
二 td width 一 "292" 盖 一 p 之 MAYA 课程 培训 二 /p 之 一 /td 
<td width="151">180</p></td> 
过 td width 一 "134" 之 一 p 过 合格 </p 二 </td> 

</tr> 

<tr> 二 ! 一 奇数 行 一 
< 一 td>2003 一 /td> 
< 一 td width 一 "299" 盖 一 p> 北 京 电视 广播 大 学 二 /p> 王 /td> 
过 td width 一 "292" 之 一 p 过 项 目 式 教学 培训 /p</td> 
< 一 td width="151"><p align= "left">90</p></td> 
过 td width 一 "134" 之 <<p 过 合格 一 /p>><</td> 


</tr> 
< 一 tr class= "altrow"> 所 !-- 偶数 行 一 
=<td>2004</td> 


二 td width 一 "299" 二 一 p 二 首都 师范 大 学 二/p 二 二 /td 
过 td width 一 "292" 之 一 p 二 教学 评价 改革 培训 去 /p 之 二 /td> 
<td width="151"><p>80</p></td> 
二 td width 一"134" 盖 一 p 二 合格 一 /p> 一 /td> 
</tr> 
<tr> 二 ! 一 奇数 行 一 
<td>2005</td> 
过 td width 一 "299" 之 世 p 二 百度 培训 中 心 二 /p>> 二 /td> 
292" 盖 一 p> 淘 宝 装修 培训 二 /p 之 二 /td> 
151"><p>90</p></td> 
过 td width= 二 "134" 之 过 p 志 合格 二 /p>> 二 /td> 
</tr> 
tr class= "altrow"> <<!-- 偶数 行 一 > 
<td>2006</td> 
过 td width 一 "299" 之 一 p 过 百度 培训 中 心 二 /p>> 二 /td 
过 td width 一 "292" 盖 一 p 二 网 站 推广 培训 二 /p>> 二 /td 
<td width="151"><p>100</p></td> 
过 td width 一 "134" 过 一 p>> 合 格 二 /p> 二 /td> 
二 je 
<tr> 二 ! 一 奇数 行 -> 
<td>2007</td> 
过 td width 一 "299" 二 一 p 二 北大 青鸟 培训 中 心 二 /p> 志 /td> 
二 td width 一 "292" 盖 一 p 二 网 站 优化 培训 二 /p> 二 /td 
<td width="151"><p>85</p></td> 
过 td width 一 "134" 二 一 p 二 合格 一 /p>> 到 /td> 





</tr> 
tr class= "altrow"> 二 ! 一 偶数 行 一 > 
<td>2008</td> 


二 td width 二 "299" 放 过 p 记 北京 理工 大 学 /p</td 才 
二 td width 一 "292" 盖 <p>ITAT 新 兴 产 业 高 峰 论 坛 培训 二 br /二 
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移动 互联 培训 二 /p>> 一 /td> 
<td width="151"><p>95</p></td> 
过 td width 一 "134" 二 一 pb 二 合格 一 /p> 一 /td> 


</tr> 
> 
=<td>2009<=/td> 


去 (一 奇数 行 -=> 


< 一 td width 王 "299" 二 一 p 二 北京 电视 广播 大 学 二 /p> 二 /td 
过 td width 一 "292" 之 一 p 二 远程 教育 培训 天 /p>></td> 
<td width="151"><p>90</p></td> 

过 td width 一 "134" 二 一 p 二 合格 过 /p</td>> 


</tr> 
<tr class= "altrow"> 
=<td>2010</td> 


二 ! 一 偶数 行 一 二 


过 td width 一 "299" 之 一 p 二 北京 电视 广播 大 学 二 /p<</td> 
过 td width 一 "292" 二 一 p> 微 课 培 训 二 /p> 志 /td> 

<td width="151"><p>90</p></td> 

过 td width 一 "134" 之 一 p 二 合格 一 /p>> 一 /td> 


</tr> 
<tr> 
<td>2011</td> 


和 之! 一 青 数 行 一 > 


二 td width 一 "299" 盖 一 p> 清 华 大 学 出 版 社 </p 二 /td 
过 td width 一 "292" 盖 一 p> 主 编 培训 天/p>> 二 /td> 

<td width="151"><p>90</p></td> 

过 td width 一 "134" 二 一 p 二 合格 一 /p> 二 /td> 


</tr> 
tr class="altrow"> 
<td>2012</td> 


二 ! 一 偶数 行 一 二 


二 td width 一 "299" 一 p> 北 京 电 商 联盟 一 /p> 生 /td> 








=td width 
< 一 td widt 


292" 盖 一 p> 网 站 优化 培训 二 /p 二 二 /td 二 
151"><p>200</p></td> 


一 td width="134" 二 一 p> 合 格 一 /p>> 一 /td> 


</tr> 
<tr> 
=<td>2013<=/td> 
二 td 二 华东 大 学 /td 二 


二 ! 一 奇数 行 一 二 


二 td 二 创新 教育 培训 过 /td 二 
<td width="151"><p>85</p></td> 
二 td width 二 "134" class 一 "altrow" 二 一 p>> 合 格 一 /p 二 一 /td 


</t> 
< 一 tr class= "altrow"> 二 ! 一 偶数 行 一 
=td>2013</td> 
三 td 二 西安 科技 大 学 二 /td 二 
二 td 记 互 联网 十 讨论 会 二 /td 二 


一 td width="151"><p>95</p><=/td> 
一 td width 一 "134" 之 过 p> 合格 一 /p>> 一 /td 


</tr> 
<tr> 二 ! 一 奇数 行 一 > 
<td>2014</td> 
二 td 二 华中 科技 大 学 二 /td 二 
二 td 二 物 联 网 的 未 来 研讨 会 二 /td 二 


一 td width="151"><p>90</p></td> 


<td width 一 "134" class 一 "altrow" 二 一 p 二 合格 二 /p> 王 /td>> 
</tr> 
=~tr class= "altrow"> 二 ! 一 偶数 行 一 
=<td>2015</td> 
二 td 二 河北 大 学 二 /td 
去 td> 网 络 营 销 培训 会 一 /td 
<td width="151"><p>90</p></td> 
<td width 王 "134" 之 <<p> 合 格 之 /p 二 /td 二 
</tr> 
< 一 tr 二 ! 一 奇数 行 一 二 
=td>2016</td> 
到 td> 西 北大 学 二 /td> 
二 td 创新 教育 新 形式 研讨 会 二 /td 二 
<td width="151"><p>90</p></td> 
< 一 td width 一 "134" class 一 "altrow" 二 一 p> 合 格 二 /p 二 二 /td 二 
</tr> 
=/table> 
</body>=/html> 
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纯 CSS 设置 隔行 变色 需要 将 表格 中 的 所 有 的 偶数 行 都 手动 加 上 单独 的 CSS 类 别 样式 ， 
如 果 表 格 数据 量 大 , 则 十 分 麻烦 。 另 外 ,如 果 和 希望 在 某 两 行 数据 中 间 插 和 一行 , 则 改动 将 


更 大 。 


当 页 面 中 引入 JavaScript 时 ,上 述 的 情况 得 到 了 很 好 的 改观 ,不 再 需要 一 行 行 手动 添加 
CSS 类 别 样式 ,只 需 用 for 循环 遍历 所 有 表格 的 行 , 当 行 号 为 偶数 时 则 添加 单独 的 CSS 


类 别 。 

例 8-2 ”JavaScript 实现 隔行 变色 的 表格 。 

=html> 

<head> 

< 一 title 二 JavaScript 实现 隔行 变色 的 表格 一 /title 二 

=style> 

<!— 

.datalist{ 
border:1px solid #007108; /* 表格 边框 */ 
font-family: Arial; 
border-collapse: collapse; /* 边框 重 倒 x*/ 
background-color: # d9ffdc; /* 表格 背景 色 x*/ 


font-size: 14px; 
} 
.datalist th{ 


border:1px solid #007108; /= 行 名 称 边框 * / 
background-color: 井 00a40c; /* 行 名 称 背 景色 * / 
color: # FFFFFF; /* 行 名 称 颜色 * / 


font-weight: bold; 
padding-top:4px; padding-bottom:4px; 
padding-left:12px; padding-right:12px; 
text-align: center; 

} 

. datalist td{ 
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border:1px solid #007108; /* 单 元 格 边框 * / 
text-align: left; 
padding-top:4px; padding-bottom:4px; 
padding-left:10px; padding-right:10px; 
} 
.datalist tr.altrow{ 
background-color: # a5e5aa; /= 隔行 变色 x*/ 
} 
一 > 
二 /style 二 
一 script language= "javascript"> 
window.onload 一 function(){ 
var oTable= document. getElementByld( "oTable"); 
for(var i=0;i<oTable. rows. length;i++ ){ 
if(i%2==0) // 偶 数 行 时 


oTable. rows[i] .className= "altrow" ; 


} 
<=/script> 
=/head> 
=body> 
=table class= "datalist" summary= "list of members in EE Studay" id="oTable"> 
<tr> 
二 th width 二 "144" scope 一 "col" 二 起 止 时 间 志 /th> 
王 th scope 一 "col" 二 研修 地 点 二 /th 二 
一 th scope 一 "col" 二 研修 内 容 一 /th 二 





< 一 th scop col" 二 课时 二 /th 二 

一 th scope 二 "col" 二 考核 结果 二 /th 二 
</t> 
<tr> 

=td>2001</td> 


二 td width 一 "299" 二 一 p 二 北京 师范 大 学 二 /p> 二 /td> 
二 td width 一 "292" 盖 一 p 二 青年 教师 职业 技能 培训 二 /p> 
</td> 
<td width="151"><p>90</p></td> 
td width=="134" 这 过 p 二 合格 过 /p 二 </td 生 
</tr> 
<tr> 
<td>2002</td>> 
过 td width 一 "299" 盖 一 p 二 中 央 美 院 一 /p>> 二 /td 
< 一 td width="292" 盖 一 p 之 MAYA 课程 培训 二 /p 二 二 /td 二 
< 一 td width="151">180</p></td> 
td width 王 "134" 盖 <<p 过 合格 天 /p>></td> 
/i 
<tr> 
<td>2003=/td> 
二 td width 一 "299" 之 一 p 二 北京 电视 广播 大 学 二/p 二 /td 
二 td width 一 "292" 二 一 p 二 项 目 式 教学 培训 二 /p> 二 /td> 
<td width="151"><p align= "left">90</p></td> 
过 td width 二 "134" 这 过 p 志 合格 之/p 二 </td 和 > 
/> 


Ss 第 8 章 ”jQuery 基础 -a9 


ee 
<td>2004</td> 
过 td width 一 "299" 二 一 p 二 首都 师范 大 学 一 /p>> 一 /td 
< 一 td width 一"292" 二 一 p 二 教学 评价 改革 培训 到/p> 二 /td> 
<td width="151"><p>80</p></td> 
过 td width 一 "134" 之 一 pb 二 合格 一 /p>> 一 /td 

/ww> 

<tr> 
=td>2005<=/td> 
< 一 td width 一 "299" 二 一 p 二 百度 培训 中 心 二 /p 二 二 /td 
二 td width 王 "292" 二 一 p 二 淘宝 装修 培训 二 /p> 二 /td> 
<td width="151"><p>90</p></td> 
二 td width 一 "134" 之 一 p 二 合格 /p</td> 

</tr> 

<tr> 
到 td 盖 2006 一 /td> 
过 td width 一"299" 二 一 p 二 百度 培训 中 心 二 /p> 二 /td> 
过 td width 一 "292" 之 一 p 二 网 站 推广 培训 二 /p 之 二 /td> 
<td width="151"><p>100</p></td> 
过 td width 王 "134" 之 一 p> 合 格 一 /p>> 二 /td> 

</tr> 

<tr> 
=td>>2007<=/td> 
二 td width 一 "299" 二 一 p 二 北大 青鸟 培训 中 心 三 /p 二 过 /td 
二 td width 一 "292" 盖 一 p> 网 站 优化 培训 二 /p> 到 /td> 
<td width="151"><p>85</p></td> 
td width 一 "134" 之 <<p 过 合格 天 /p>><</td> 





</tr> 
<tr> 
=<td>2008<=/td> 
过 td width 二 "299" 二 过 p 二 北京 理工 大 学 </p 二 </td 二 


二 td width 二 "292" 二 二 pITAT 新 兴 产 业 高 峰 论 坛 培训 二 br /二 
移动 互联 培训 二 /p 二 一 /td 
<td width="151"><p>95</p></td> 
过 td width 二 "134" 之 过 p 志 合格 过 /p 二 </td> 
</tr> 
<tr> 
一 td>>2009 一 /td 
过 td width 一 "299" 之 一 p 二 北京 电视 广播 大 学 二 /p> 二 /td 
二 td width 一 "292" 二 一 p 二 远程 教育 培训 二 /p> 二 /td> 
<td width="151"><p>90</p></td> 
过 td width 一 "134" 之 <<p>> 合 格 一 /p>> 到 /td> 
</tr> 
<tr> 
<td>2010</td> 
二 td width 一 "299" 二 一 p 二 北京 电视 广播 大 学 二 /p>> 二 /td> 
过 td width 一 "292" 之 一 p 二 微 课 培训 二 /p>> 二 /td 
<td width="151"><p>90</p></td> 
过 td width 一 "134" 之 一 p 二 合格 一 /p> 到 /td> 
hi 
em 
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<td>2011</td> 
二 td width 一 "299" 之 <<p 二 清华 大 学 出 版 社 </p 二 </td 二 
二 td width 王 "292" 二 一 p 二 主编 培训 二 /p> 王 /td> 
<td width="151"><p>90</p></td> 
二 td width 一 "134" 盖 一 p 二 合格 二 /p 二 二 /td 二 
/tr > 
<tr> 
=<td>2012</td> 
二 td width 二 "299" 记 二 p 二 北京 电 商 联盟 二 /p 二 二 /td 二 
一 td width 一 "292" 二 一 p 二 网 站 优化 培训 二 /p 二 二 /td 二 
<td width="151"><p>200</p></td> 
<td width="134" 二 过 p 二 合格 过 /p 二 </td 二 
/> 
<tr> 
<td>2013</td> 
过 td 二 华东 大 学 <</td 
到 td> 创 新 教育 培训 过 /td> 
<td width="151"><p>85</p></td> 
td width="134" 之 一 p 二 合格 之 /p</td> 
</tr> 
<tr> 
<td>2013</td> 
去 td 西安 科技 大 学 二 /td> 
< 王 td> 互 联网 十 讨论 会 二 /td 
一 td width="151"><p>95</p></td> 
<td width 一 "134" 之 一 p 二 合格 一 /p>> 一 /td> 
</tr> 
<tr> 
<td>2014</td> 
二 td 二 华中 科技 大 学 二 /td 
二 td 二 物 联网 的 未 来 研讨 会 二 /td 二 
一 td width="151"><p>90</p></td> 
一 td width="134" 二 一 p 二 合格 一 /p 二 二 /td 
</tr> 
<tr> 
<td>2015</td> 
二 td 二 河北 大 学 二 /td 二 
二 td 二 网 络 营销 培训 会 二 /td 二 
<td width="151"><p>90</p></td> 
=td width 一 "134" 过 一 p 二 合格 二 /p 二 二 /td 二 
</tr> 
<tr> 
=td>2016</td> 
到 td 西北 大 学 二 /td> 
二 td 二 创新 教育 新 形式 研讨 会 二 /td 二 
<td width="151"><p>90</p></td> 
过 td width 二 "134" 之 一 p> 合 格 二 /p 盖 一 /td 
二 /ie 
=/table> 
=/body> 
=/html> 


入 
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以 上 代码 不 再 需要 手动 为 偶数 行 逐一 添加 
CSS 类 别 , 所 有 的 操作 都 在 JavaScript 中 完成 。 
JavaScript 代码 是 由 开发 者 自己 设计 的 ,运行 结 FTE 
果 如 图 8-2 所 示 。 另 外 , 当 需 要 对 表格 添加 或 删 | 于 > 
除 某 行 时 ,也 不 需要 修改 变色 的 代码 。 

当 jQuery 引入 页 面 中 时 , 则 不 再 需要 开发 者 
设计 类 似 例 8-2 的 算法 ,jQuery 中 的 选择 器 可 以 
直接 选中 表格 的 奇数 行 或 者 偶数 行 。 选 中 之 后 再 
添加 类 别 样式 即 可 。 

例 8-3 jQuery 实现 隔行 变色 的 表格 。 





研修 地 点 研修 内 容 





























< 一 script language= "javascript" src= "jquery. min.js"></script> 
=script language= "javascript"> 
$ (function() { 

$ ("table, datalist tr:nth-child(odd)").addClass("altrow"); 





)); 
=/script> 


以 上 JavaScript 代码 首先 调用 jQuery 框架 ,然后 使 用 jQuery, 只 需 一 行 代码 便 可 以 轻 
松 实现 表格 的 隔行 变色 ,其 语法 也 十 分 简单 ,后 面 的 章节 会 陆续 介绍 ,运行 结果 与 例 8-1 和 
例 8-2 的 运行 结果 完全 相同 。 


8.1.2 jQuery 的 功能 


如 今 jQuery 已 经 发 展 到 集 各 种 JavaScript、CSS、DOM 和 AJAX 功能 于 一 体 的 强大 框 
架 , 可 以 用 简单 的 代码 轻松 地 实现 各 种 网 页 效果 。 它 的 宗旨 就 是 让 开发 者 写 更 少 的 代码 ,做 
更 多 的 事情 。 目 前 ,jQuery 主要 提供 如 下 功能 。 

(1) 访问 页 面 框架 的 局 部 。 这 是 前 面 章节 介绍 的 DOM 模型 所 完成 的 主要 工作 之 一 ， 
通过 前 面 章节 的 示例 也 可 以 看 到 ,DOM 获取 页 面 中 某 个 节点 或 者 某 一 类 节点 有 固定 的 方 
法 ,而 jQuery 则 大 大 地 简化 了 其 操作 的 步骤 。 

(2) 修改 页 面 的 表现 (presentation) 。CSS 的 主要 功能 就 是 通过 样式 风格 来 修改 页 面 
的 表现 。 然 而 由 于 各 个 浏览 器 对 CSS3 标准 的 支持 程度 不 同 , 使 得 很 多 CSS 的 特性 没 能 很 
好 地 体现 。jQuery 的 出 现 很 好 地 解决 了 这 个 问题 , 它 通过 封装 好 的 JavaScript 代码 ,使 得 各 
种 浏览 器 都 能 很 好 地 使 用 CSS3 标准 , 极 大 地 丰富 了 CSS 的 运用 。 

(3) 更 改 页 面 的 内 容 。 通 过 强大 而 方便 的 API,jQuery 可 以 很 方便 地 修改 页 面 的 内 容 ， 
包括 文本 的 内 容 、 图 片 . 表 单 的 选项 ,甚至 整个 页 面 的 框架 。 

(4) 响应 事件 。 前 面 章节 介绍 了 JavaScript 处 理事 件 的 相关 方法 ,而 引入 jQuery 之 后 ， 
可 以 更 加 轻松 地 处 理事 件 ,而 且 开 发 人 员 不 再 需要 考虑 讨 厌 的 浏览 器 兼容 性 问题 。 

(5) 为 页 面 添加 动画 。 通 常 在 页 面 中 添加 动画 都 需要 开发 大 量 的 JavaScript 代码 ,而 
jQuery 大 大 简化 了 这 个 过 程 。jQuery 的 库 提供 了 大 量 可 自 定 义 参数 的 动画 效果 。 

(6) 与 服务 器 异步 互动 。jQuery 提供 了 一 整套 AJAX 相关 的 操作 ,大 大 方便 了 异步 互 
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动 的 开发 和 使 用 。 
(7) 简化 常用 的 JavaScript 操作 ,jQuery 还 提供 了 很 多 附加 的 功能 来 简化 常用 的 
JavaScript 操作 ,例如 ,数组 的 操作 .迭代 运算 等 。 


8.1.3 jQuery 的 特点 


jQuery 是 一 个 简洁 快速 的 JavaScript 脚本 库 , 它 能 让 开发 人 员 在 网 页 上 简单 地 操作 文 
档 , 处 理事 件 ,运行 动画 效果 或 者 添加 异步 交互 ,jQuery 的 设计 会 改变 开发 人 员 写 
JavaScript 代码 的 方式 ,提高 编程 效率 。jQuery 主要 特点 如 下 。 


1. 代码 精致 小 巧 


jQuery 是 一 个 轻 量 级 的 脚本 库 , 其 代码 非常 小 巧 ,最 新 版 本 的 jQuery 库 文件 压缩 之 后 
只 有 20KB 左右 ,在 网 络 万 千 的 今天 ,增强 网 站 用 户 的 体验 显得 特别 重要 ,小 巧 的 jQuery 完 
全 可 以 做 到 这 一 点 。 


2. 强大 的 功能 函数 

过 去 在 写 JavaScript 代码 时 ,如 果 没 有 良好 的 基础 ,很 难 写 出 复杂 的 JavaScript 代码 ， 
而 且 JavaScript 是 不 可 编译 的 语言 ,开发 效率 较 低 ,使 用 jQuery 的 功能 函数 ,能 够 帮助 开发 
人 员 快 速 地 实现 各 种 功能 ,而 且 会 让 代码 好 看 简洁 ,结构 清晰 。 

3， 跨 浏览 器 


JavaScript 代码 的 浏览 器 兼容 问题 一 直 是 Web 开发 人 员 的 恶 梦 ,经 常 是 一 个 页 面 在 IE 
浏览 器 下 运行 正常 ,但 在 Firefox 浏览 器 下 却 出 现 问题 ,开发 人 员 往 往 要 在 一 个 功能 上 针对 
不 同 的 浏览 器 编写 不 同 的 脚本 代码 ,这 对 于 开发 人 员 是 一 件 非常 痛苦 的 事情 ,jQuery 将 开 
发 人 员 从 这 个 恶 梦 中 解脱 出 来 , 它 具 有 良好 的 兼容 性 ,兼容 各 大 主流 浏览 器 。 


4. 链 式 的 语法 风格 


jQuery 可 以 对 元 素 的 一 组 操作 进行 统一 的 处 理 , 不 需要 重新 获取 对 象 ,也 就 是 说 可 以 
基于 一 个 对 象 进行 一 组 操作 ,这 种 方式 减少 了 代码 量 , 减 小 了 页 面体 积 ,有 助 于 浏览 器 快速 
加 载 页 面 ,增强 用 户 的 体验 。 


5. 插件 丰富 


除了 jQuery 本 身 具 有 的 一 些 特效 外 ,还 可 以 通过 插件 实现 更 多 的 功能 ,如 表单 验证 , 播 
放 效果 ,Tab 导航 条 ,表格 排序 ,图像 特效 等 ,网 上 的 jQuery 插件 很 多 ,可 以 直接 下 载 下 来 使 
用 ,而 且 搬 件 将 JavaScript 代码 和 HTML 代码 完全 分 享 ,便于 维护 。 





8.1.4 下 载 并 使 用 jQuery 


jQuery 能 够 改变 开发 人 员 编 写 JavaScript 脚本 的 方式 ,降低 学 习 和 使 用 Web 前 端 开 
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发 的 复杂 度 , 提高 网 页 开发 效率 ,无 论 对 于 JavaScript 初学 者 ,还 是 Web 开发 资深 专家 ， 
jQuery 都 应 该 是 必 备 的 工具 。jQuery 适合 于 设计 师 ,开发 者 以 及 Web 编程 爱好 者 ,同样 适 
合 商 业 开 发 。 可 以 说 jQuery 适合 任何 应 用 JavaScript 的 地 方 ,也 可 用 于 不 同 的 Web 应 用 
程序 中 。 

在 使 用 jQuery 之 前 ,需要 下 载 jQuery 技术 框架 文 
件 , 并 引入 页 面 中 。 


登录 网 址 http://www. jq22. com/jquery-info122， syJaQuerY 
该 网 站 提供 了 最 新 的 jQuery 框架 下 载 ,如 图 8-3 所 示 ， ol 





通常 只 需 下 载 最 小 的 jQuery 包 (Minified) 即 可 。 

下 载 完 成 后 不 需要 任何 安装 过 程 ,直接 将 下 载 
的 .js 文件 用 二 script 二 标签 导入 自己 的 页 面 中 即 可 , 代 
码 如 下 : 


图 8-3 下 载 jQuery 


一 script language= "JavaScript" src= "jQuery.min.js"></script> 


引入 jQuery 框架 文件 之 后 便 可 在 页 面 脚本 中 调用 jQuery 对 象 方 法 或 属性 ,并 以 
jQuery 特色 语法 规范 来 编写 脚本 。 


8.2 jQuery 的 “$” 


在 jQuery 中 ,最 频繁 使 用 的 莫 过 于 美元 符号 * $”, 它 提供 了 各 种 各 样 的 功能 ,包括 选择 
页 面 中 的 一 个 或 一 类 元 素 ,作为 功能 函数 的 前 级 ,window. onload 的 完善 ,创建 页 面 的 DOM 
节点 等 。 本 节 主 要 介绍 jQuery 中 “$ ”的 使 用 方法 ,作为 以 后 章节 的 基础 。 


8.2.1 选择 器 


在 CSS 中 选择 器 的 作用 是 选择 页 面 中 某 一 类 (类 别 选择 器 ) 元 素 或 者 某 个 元 素 (ID 选 
择 器 ) ,而 jQuery 中 的 “ $ ”作为 选择 器 ,同样 是 选择 某 一 类 或 某 个 元 素 , 只 不 过 jQuery 提供 
了 更 多 更 全 面 的 选择 方式 ,并 且 为 用 户 处 理 了 浏览 器 的 兼容 问题 。 

例如 ,在 CSS 中 可 以 通过 如 下 代码 来 选择 二 h2 二 标签 下 包含 的 所 有 子 标签 二 a> ,然后 
添加 相应 的 样式 风格 。 

h2 a{ 

/* 添 加 CSS 属性 */ 

} 

而 在 jQuery 中 则 可 以 通过 如 下 代码 来 选中 二 h2 二 标签 下 包含 的 所 有 子 标签 二 a 二 , 作 
为 一 个 对 象 数 组 , 供 JavaScript 调用 。 


$ 0"h2 a") 


如 例 8-4 所 示 ,文档 中 有 两 个 二 h2 二 标签 ,分 别 包含 了 二 a 二 子 元 素 。 
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了 元 素 的 选择 ,如 果 使 用 DOM ,类 似 这 样 的 节点 选择 将 需要 
大 量 的 JavaScript 代码 。 


例 8-4 使 用 "$ ”选择 器 。 


=html> 

=head> 

过 title 二 例 8-4 $ 选择 器 二/title 二 

一 script language= "javascript" src= "jquery. min.js"><=/script> 





=script language= "javascript"> 

window. onload= function(){ 
var oElements= $ ("h2 a"); // 选 择 匹 配 元 素 
for(var i=0;i<oElements. length;i++) 

oElements[i] .innerHTML=i. toString(); 

} 

</script> 

=/head> 

=body> 

二 h2 二 <a href 王 "# "二 正文 之 /a 二 内 容 <</h2 二 

二 h2 汪 正文 <a href 二 "#" 二 内 容 </a>></h2> 

二 /body 二 D -4 和 Ex \ 

</html> 全 3 C IDfieW/DVqueya/8 灾 | 三 





运行 结果 如 图 8-4 所 示 ,可 以 看 到 jQuery 很 轻松 地 实现 





图 8-4 使 用 * $ ”选择 器 


jQuery 中 选择 器 的 通用 语法 如 下 : 


$ (selector) 


jQuery(selector) 


特别 提示 : 在 jQuery 中 美元 符号 $ 其 实 就 等 同 于 “jQuery”。 


其 中 ,selector 符合 CSS3 标准 ,这 在 后 面 的 章节 会 详细 地 介绍 ,下 面 列 出 一 些 典型 的 
jQuery 选择 元 素 的 例子 。 


$ ("#showDiv") 


ID 选择 器 ,相当 于 JavaScript 中 的 document. getElementByld("# showDiv"), 可 以 看 
到 jQuery 的 表示 方法 简洁 得 多 。 


$ Ee SomeClass" 》 


类 别 选 择 器 ,选择 CSS 类 别 为 “SomeClass” 的 所 有 节点 元 素 , 在 JavaScript 中 要 实现 相 
同 的 选择 ,需要 用 for 循环 遍历 整个 DOM。 


$ ("p:odd") 


选择 所 有 位 于 奇数 行 的 二 p 二 标签 。 几 乎 所 有 的 标签 都 可 以 使 用 *:odd” 或 者 :even” 来 
实现 奇偶 的 选择 。 


$ ("td:nth-child(1)") 
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所 有 表格 行 的 第 一 个 单元 格 ,就 是 第 一 列 。 这 在 修改 表格 的 某 一 列 的 属性 时 是 非常 有 
用 的 ,不 再 需要 一 行 行 遍 历 表格 。 

$ "li>a") 

子 选择 器 ,返回 < 过 li 二 标签 的 所 有 子 元 素 二 a ,不 包括 孙 标 签 。 

$ ("a[href $ =pdf]") 

选择 所 有 超 链接 ,并 且 这 些 超 链接 的 href 属性 是 以 “pdf” 结 尾 的 。 有 了 属性 选择 器 ,可 


以 很 好 地 选择 页 面 中 的 各 种 特性 元 素 。 
关于 jQuery 的 选择 器 的 使 用 还 有 很 多 技巧 ,在 后 面 的 章节 将 会 陆续 介绍 。 





8.2.2 功能 函数 前 缀 


开发 人 员 在 使 用 JavaScript 时 通常 会 编写 一 些小 函数 处 理 细节 。 例 如 ,JavaScript 中 没 
有 提供 清理 文本 框 中 空格 的 功能 ,要 想 实 现 该 功能 ,就 必须 编写 相应 的 小 程序 。 但 是 在 引入 
jQuery 后 ,开发 人 员 就 可 以 直接 调用 trim() 函数 来 轻松 地 去 掉 文 本 框 前 后 的 空格 。 

例 8-5 jQuery 中 去 除 首尾 空格 的 $. trim() 方 法 。 

=html> 

=head> 


=title> $ .trim() 一 /title 二 
一 script language 一 "javascript”src 一 "jdquery. min.js"></script> 扫 一 扫 





script language= "javascript"> 

var SString 一 ”abcdefghij "; 

sString= $ .trim(sString) ; 

alert(sString .length) ; 

=</script> 

=</head> 

<body> | 
</body> JavaScript 提醒 
</html> 


以 上 代码 的 运行 结果 如 图 8-5 所 示 , 字 符 串 
sString 首尾 的 空格 都 被 jQuery 去 掉 了 。 在 例 8-5 程序 
中 ,$. trim(sString) 就 相当 于 jQuery. trim (sString)。 

jQuery 中 类 似 这 样 的 功能 函数 很 多 ,而 且 涉 及 
JavaScript 的 很 多 方面 ,在 后 续 的 章节 中 将 会 陆续 介绍 。 
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图 8-5 jQuery 中 去 除 首 尾 空格 的 
$ .trim() 方 法 


8.2.3 解决 window. onload 函数 的 冲突 


众所周知 ,页 面 的 HTML 框架 只 有 在 页 面 全 部 加 载 后 才能 被 调用 ,所 以 window. 
onload 函数 的 使 用 频率 相当 高 ,由 此 带 来 的 冲突 不 容 忽视 。jQuery 中 的 ready() 函数 很 地 
的 解决 了 这 种 冲突 , 它 自动 将 函数 在 页 面 加 载 结束 后 再 运行 ,同一 个 页 面 可 以 使 用 多 个 
ready() 函 数 ,并 且 之 间 不 存在 冲突 。 例 如 : 





-50,--- JavaScript+jQuery Web 交 互 程序 设计 


$ (document) . ready(function() { 
$ ("table. datalist tr:nth-child(odd)").addClass("altrow"); 
中 


对 上 述 代码 jQuery 还 提供 了 简写 ,可 以 省 略 其 中 的 (document). ready 部 分 ,代码 


如 下 : 


$ (function() { 
$ ("table. datalist tr:nth-child(odd)").addClass("altrow"); 
DD; 


即 例 8-3 中 使 表格 变色 的 代码 。 





8.2.4 创建 DOM 元 素 


利用 DOM 方法 创建 元 素 节点 ,通常 需要 将 document. createElement ( ) .document. 
createTextNode() .appendChild() 配 合 使 用 ,十 分 麻烦 ,而 jQuery 使 用 *$” 则 可 以 直接 创建 


DOM 元 素 ,例如 : 
var oONewP 一 $ ("二 p 二 这 是 一 个 测试 行 二 /p 这 "); 


以 上 代码 等 同 于 JavaScript 中 的 如 下 代码 : 


var oP= document. createElement("p") ; 
var oText 二 document. createTextNode(" 这 是 一 个 测试 行 "); 
oP.appendChild(oText) ; 


另外 ,jQuery 还 提供 了 DOM 元 素 的 insertAfter() 方 法 ,结合 之 前 章节 提 到 的 插入 段落 


节点 的 程序 代码 可 变更 为 例 8-6 。 
例 8-6 jQuery 中 创建 DOM 元 素 。 


=html> 

=head> 

二 title 之 8-6 创建 DOM 元 素 二 /title> 

=script language= "javascript" src= "jquery. min.js"></script> 
一 script language= "javascript"> 


$ (function() { //ready() 函 数 
var oNewP 二 $ ("二 p 二 这 是 一 个 测试 行 二 /p 这 "); // 创 建 DOM 元 素 
oNewP. insertAfter("#myTarget"); /VinsertAfter() 方 法 
DD; 
/script> 
=</head> 
=body> 


二 p id= 王 "myTarget" 二 插入 这 行文 字 之 后 一/p 二 

< 去 p> 也 就 是 插入 这 行文 字 之 前 ,但 这 行 没有 id, 也 可 能 不 存在 二 /p> 
一 /body> 
=/html> 





运行 结果 如 图 8-6 所 示 , 可 以 看 到 利用 jQuery 大 大 缩短 了 代码 长 度 , 节 省 了 编写 时 间 ， 


为 开发 者 提供 了 便利 。 


人 第 8 章 jQuery 基础 --- 省 57--: 





站 8-6 芒 DOM 元素 x 
的 DP © |D file///D:/jquery8/10-61N 





插入 这 行文 字 之 后 

这 是 一 个 测试 行 

也 就 是 插入 这 行文 字 之 前 ， 但 这 行 没有 id， 
也 可 能 不 存在 


图 8-6 创建 DOM 元 素 











8.2.5 自 定 义 添加 “$” 


jQuery 还 给 用 户 提供 了 自 定义 添加 “$ ”的 方法 ,“$. fn” 是 自 定义 扩展 jQuery 的 必要 
方法 ,对 于 $.fn 的 扩展 ,就 是 为 jQuery 类 添加 “成 员 函 数 ”"。jQuery 类 的 实例 可 以 使 用 这 
个 “成 员 函 数 ”。 比 如 ,要 开发 一 个 插件 ,做 一 个 特殊 的 编辑 框 , 当 它 被 单 击 时 , 便 弹 出 当前 编 
辑 框 里 的 内 容 。 可 以 这 么 做 ,部 分 代码 如 下 : 
$ .fn.extend( { 
alertWhileClick :function(){ 
$ (Cthis). click(function) { 
Alert( $ (this). val()); 
二 
} 
}); 
$C"#inputl").alertWhileClick(); /页面 上 为 : 二 input id 一 "input" type 一 "text"/ 二 *#/ 
上 面 的 $("#inputl") 是 一 个 jQuery 实例 , 当 它 调用 成 员 方法 . alertWhileClick 后 , 便 
实现 了 扩展 ,每 次 被 单 击 时 它 会 先 弹 出 目前 编辑 框 里 的 内 容 。 


8.2.6 解决 $ ”的 冲突 


一 般 来 说 ,开发 人 员 倾 向 于 使 用 简单 的 $0 〇 编写 代码 以 减少 工作 量 。 但 是 在 有 些 情 况 
下 不 能 使 用 $ () ,因为 $ 有 时 可 能 已 经 被 其 他 的 JavaScript 库 定义 使 用 了 ,这 时 就 会 出 现 冲 
突 。 为 此 ,jQuery 提供 了 jQuery. noConflictO) 方 法 来 避免 $ () 冲突 的 发 生 。 同 时 ,还 可 以 
为 jQuery 定义 一 个 别名 ,例如 ,$ ("div p") 必 须 写成 jQuery("div p")。 


8.3 jQuery 对 象 与 DOM 对 象 


1. 两 种 对 象 简介 


(1) DOM 对 象 

通过 传统 的 JavaScript 方法 访问 DOM 的 元 素 , 可 以 生成 DOM 对 象 。 例 如 ,使 用 
JavaScript 方法 getElementByTagName() ,在 文档 中 选择 标签 名 为 h3 的 匹配 元 素 ,最 终 将 
生成 的 DOM 对 象 存 储 在 test 变量 中 。 代 码 如 下 : 
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var test 一 document. getElementByTagName("h3"); 


生成 的 DOM 对 象 拥有 许多 方法 和 属性 ,可 以 用 来 操作 它 所 指向 的 元 素 。 例 如 ,使 用 
DOM 对 象 的 innerHTML 属性 ,获取 匹配 元 素 内 部 的 HTML 代码 内 容 。 代 码 如 下 : 


var testtestHTML 一 test.innerHTML; 


(2) jQuery 对 象 
在 jQuery 中 也 有 办 法 访问 DOM 的 元 素 。 这 里 先 举 个 例子 跟 JavaScript 进行 比较 , 具 
体 的 语法 结构 可 以 参见 第 9 章 。 代 码 如 下 : 


var test= $ ("h3"); 


虽然 也 指向 标签 名 为 h3 的 匹配 元 素 , 但 是 以 这 种 方式 生成 的 jQuery 对 象 无 法 使 用 
DOM 对 象 的 任何 方法 和 属性 ,例如 ,$("h3").innerHTML 的 写法 是 错误 的 。 不 过 jQuery 
对 象 有 它 自 己 独 有 的 方法 和 属性 ,完全 可 以 做 到 传统 DOM 对 象 能 做 到 的 所 有 事情 。 例 如 ， 
可 以 在 jQuery 对 象 上 使 用 html( ) 方 法 ,获取 匹配 元 素 内 部 的 HTML 代码 内 容 。 代 码 
如 下 : 





var testtestHTML= test. html(); 


由 上 面 的 两 行 代码 还 可 以 初步 看 出 ,使 用 jQuery 需要 分 为 两 个 步骤 : 第 一 步 是 获取 指 
向 某 元 素 的 jQuery 对 象 ;第 二 步 是 使 用 jQuery 对 象 的 方法 来 操作 该 元 素 ,以 达到 更 改 
HTML 网 页 内 容 和 外 观 的 目的 。 

由 上 面 的 分 析 能 够 得 出 如 下 的 结论 : 所 谓 jQuery 对 象 就 是 通过 jQuery 包装 DOM 对 
象 后 产生 的 对 象 。jQuery 对 象 是 jQuery 独 有 的 ,其 可 以 使 用 jQuery 里 的 方法 。 


2. jQuery 对 象 与 DOM 对 象 的 相互 转换 


虽然 jQuery 对 象 和 DOM 对 象 并 不 等 价 ,但 是 它们 两 者 可 以 相互 转换 ,转换 后 即 可 使 
用 彼此 的 方法 和 属性 。 
(1) jQuery 对 象 转换 成 DOM 对 象 
将 jQuery 对 象 转换 成 DOM 对 象 , 可 以 使 用 get() 方 法 .其 语法 结构 为 get([Lindex]) 。 
例如 ,假设 页 面 上 有 一 个 无 序列 表 : 
一 ul 一 
<li><a href="http://www. baidu. com"> Baidu</a><=/li> 


=li><a href="http://www. google.com">Google</a></Il> 
</ul> 


jQuery 对 象 是 一 个 可 以 匹配 多 个 元 素 的 集合 。 如 果 不 带 参数 ,get() 方 法 会 返回 所 有 
匹配 元 素 的 DOM 对 象 ,并 将 它们 包含 在 一 个 数组 中 。 代 码 如 下 : 


var test 一 $ ("li"). get(); //jQuery 对 象 转换 成 DOM 对 象 
alert(test[0] .innerHTML) ; // 输 出 二 a href 王 "http://www.baidu.com" 二 Baidu 一 /a> 
alert(test[1] .innerHTML) ; // 输 出 二 a href 一 "http://www.google.com" 二 Google 一 /a> 


如 果 指 定 了 参数 index, 由 于 从 0 开始 计数 ,get(index) 方法 会 返回 第 (index 十 1) 个 元 
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素 的 DOM 对 象 。 代 码 如 下 : 


var test= $ ("i"). get(0); //jQuery 对 象 转换 成 DOM 对 象 

alert(test.innerHTML) ; // 输 出 二 a href 一 "http://www.baidu.com" 二 Baidu 一 /a> 

由 于 jQuery 对 象 具有 与 数组 类 似 的 特征 ,还 可 以 通过 [indexj] 索 引 方式 得 到 某 一 
素 的 DOM 对 象 。 上 面 例子 的 等 效 代码 如 下 : 

var test= $ ("li") [0]; //jQuery 对 象 转换 成 DOM 对 象 

alert(test. innerHTML); // 输 出 二 a href=="http://www.baidu.com" 记 Baidu 二 /a 请 

然而 这 种 索引 方式 缺乏 get() 方 法 所 具有 的 特殊 功能 ,例如 ,可 以 指定 参数 index 为 负 
数 , 在 匹配 元 素 的 集合 中 从 末尾 最 后 一 个 开始 计数 ,返回 倒数 第 |index| 个 元 素 的 DOM 对 
象 。 代 码 如 下 : 

var test= $ ("li"). get(-1); //jQuery 对 象 转换 成 DOM 对 象 

alert(test.innerHTML) ; // 输 出 二 a href=="http://www.google.com" 记 Google 二 /a 请 

(2) DOM 对 象 转换 成 jQuery 对 象 

对 于 一 个 DOM 对 象 elements, 只 需 用 $ () 把 它 包 装 起 来 ,就 可 以 获得 相应 的 jQuery 
对 象 了 ,其 语法 结构 为 $ (elements)。 例 如 ,使 用 getElementByTagName() 方 法 选择 标签 
名 为 二 li 一 的 元 素 , 再 通过 $ () 把 生成 的 DOM 对 象 转换 为 jQuery 对 象 。 代 码 如 下 : 


var $ test= $ (document. getElementByTagName( "li")); / * DOM 对 象 转换 成 jQuery 对 象 */ 
alert( $ test. eq(0). html()); // 输 出 二 a href 王 "http://www.baidu.com" 二 Baidu 一 /a> 
alert( $ test. eq(1). html()); // 输 出 二 a href="http://www.google.com" 记 Google 二 /a 记 


为 了 从 匹配 多 个 元 素 的 jQuery 对 象 中 提取 出 只 匹配 其 中 一 个 元 素 的 jQuery 对 象 ,可 
以 使 用 eq() 方 法 ,该 命令 会 在 以 后 的 学 习 中 讲解 ,这 里 仅 作 了 解 即 可 。 


8.4 ”案例 一 一 我 的 第 一 个 jQuery 程序 


开发 jQuery 程序 其 实 很 简单 ,需要 做 的 就 是 引入 jQuery 库 ,然后 调用 即 可 。 下 面 通过 
一 个 简单 的 案例 引导 大 家 如 何 使 用 jQuery。 


1. 下 载 jQuery 库 文 件 


由 于 jQuery 是 一 个 免费 开源 项 目 ,任何 人 都 |。 
可 以 在 jQuery 的 官方 网 站 http://jquery. com 
(图 8-7) 下 载 到 最 新 版 本 的 jQuery 库 文件 。 

jQuery 库 文件 有 两 种 类 型 : 完整 版 和 压缩 
版 。 前 者 主要 用 于 测试 开发 ,或 者 项 目 应 用 。 例 
如 ,jQuery-3. 2. 1. js(129KB) 和 jQuery-3. 2. 1. 
min. js(85KB) 两 个 文件 ,它们 分 别 对 应 完整 版 和 
下 载 完 jQuery 库 之 后 ,将 其 放置 在 具体 的 项 图 8-7 jQuery 的 官方 网 站 
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目 目录 下 即 可 ,在 HTML 页 面 引 入 该 jQuery 库 文件 的 代码 如 下 : 


< 一 script language= "javascript" src= "jquery. min.js"><=/script> 
=script> 


可 以 看 出 ,在 HTML 页 面 引 入 jQuery 库 文件 和 引入 外 部 的 JavaScript 程序 文件 在 形 
式 上 没有 任何 区 别 。 同 时 ,在 HTML 页 面 直接 插入 jQuery 代码 或 引入 外 部 jQuery 程序 文 
件 , 需 要 符合 的 格式 也 跟 JavaScript 一 样 。 

值得 一 提 的 是 ,外 部 jQuery 程序 文件 是 不 同 页 面 共 享 相同 jQuery 代码 的 一 种 高 效 方 
式 。 这 样 当 修改 jQuery 代码 时 ,只 需 编 辑 一 个 外 部 文件 ,操作 更 为 方便 。 此 外 ,一 旦 载 人 某 
个 外 部 jQuery 文件 , 它 就 会 存储 在 浏览 器 的 缓存 中 ,因此 不 同 页 面 重 复 使 用 它 时 无 须 再 次 
下 载 ,从 而 加 快 了 页 面 的 访问 速度 。 


2. 在 程序 中 引入 jQuery 库 文 件 


下 面 开始 编写 第 一 个 jQuery 程序 。 
例 8-7 我 的 第 一 个 jQuery 程序 。 


=html > 

<head> 

二 title 二 第 一 个 示例 二 /title> 
一 script language= "javascript" src= "jquery. min.js"></script> 
=script> 

function hello( ) 

{ alert("Hello, World");}; 











$ (document) . ready( hello); 一 第 个 元 例 > a 
</script> 全 DX Dfiley//D/jquery8/8-7.ht 窜 三 
=/head> JavaScript 提醒 站 
去 body 一 Hello, word 

=</body> 

=</html> Lee | 
运行 结果 如 图 8-8 所 示 。 图 8-8 我 的 第 一 个 jQuery 程序 


综合 案例 ,请 扫 一 扫 





课 后 练习 


. 简 答 jQuery 的 美元 符号 $ 有 什么 作用 。 
. 简 答 jQuery 中 有 哪 几 种 类 型 的 选择 器 。 


第 9 章 


jQuery 选择 器 


学 习 目 标 

使 用 jQuery 选择 器 准确 地 选取 实现 希望 的 应 用 效果 的 元 素 。 

掌握 jQuery 元 素 选 择 器 和 属性 选择 器 通过 标签 名 、 属 性 名 或 内 容 对 HTML 元 素 进行 
掌握 jQuery 选择 器 对 HTML 元 素 组 或 单个 元 素 进行 操作 的 方法 。 

掌握 jQuery 选择 器 对 DOM 元 素 组 或 单个 DOM 节点 进行 操作 的 方法 。 


9.1 jQuery 选择 器 简介 


jQuery 是 一 种 JavaScript 框架 ,是 程序 开发 过 程 中 的 一 种 半成品 。 在 Web 应 用 程序 
中 ,大 部 分 的 客户 端 操作 都 是 基于 对 象 的 操作 ,要 操作 对 象 必须 先 获 取 对 象 .jQuery 提供 了 
强大 的 选择 器 用 于 获取 对 象 。 

选择 器 是 jQuery 的 根基 ,在 jQuery 中 ,对 事件 处 理 . 遍历 DOM 和 AJAX 操作 都 依赖 
于 选择 器 。 因 此 ,如 果 能 熟练 地 使 用 选择 器 ,不 仅 能 简化 代码 ,而 且 可 以 达到 事半功倍 的 
效果 。 

jQuery 选择 器 完全 继承 了 CSS 的 风格 。 利 用 jQuery 选择 器 ,可 以 非常 便捷 地 找 出 
特定 的 DOM 元 素 , 然 后 为 它们 添加 相应 的 行为 ,而 无 须 担心 浏览 器 是 否 支 持 这 一 选 
择 器 。 


9.2 jQuery 选择 器 的 分 类 


使 用 jQuery 选择 器 选择 页 面 元 素 , 目 的 是 生成 jQuery 对 象 , 其 语法 结构 是 
$ (selector)。 凡 是 运用 $ ,其 返回 值 是 一 个 object。$ 的 选择 器 部 分 返回 值 是 单个 元 素 或 
者 集合 元 素 , 用 选择 器 获取 对 象 ,或 者 对 获取 的 对 象 进 行 筛选 ,最 终 留 下 符合 某 些 特征 的 
对 象 。 

jQuery 选择 器 可 简单 分 为 基本 选择 器 .层次 选择 器 .过 滤 选 择 器 .表单 选择 器 。 下 面 通 
过 表格 进行 一 一 介绍 。 

(1) 基本 选择 器 , 见 表 9-1。 

(2) 层次 选择 器 , 见 表 9-2 。 
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表 9-1 基本 选择 器 










































































选择 器 描述 返 回 示 例 
#id 匹配 给 定 的 id 单个 元 素 $ ("header") 
.class 匹配 给 定 的 类 名 集合 元 素 $ (". test") 
E 匹配 给 定 的 标签 名 集合 元 素 $ ("div") 
* 匹配 所 有 元 素 集合 元 素 $A 
E, .class, E. 匹配 给 定 的 集合 集合 元 素 $ ("span, . tiPS") 

表 9-2 层次 选择 器 

选择 器 描 述 返 回 示 例 
$ ("ancestor descendant") ee 里 的 所 有 descendant | 各 全 元 素 | 争 ("body div") 
$ ("parent>child") 匹配 parent 下 的 所 有 child( 子 ) 元 素 | 集合 元 素 | $ ("div>span") 
$("prev 十 next") 匹配 紧 接 在 prev 后 的 next 元 素 集合 元 素 $(".error 十 span") 
$("prev 一 siblings") 匹配 prev 后 的 所 有 siblings 元 素 集合 元 素 $("span 一 a") 

(3) 过 滤 选 择 器 ,具体 步骤 如 下 。 
Qa 基本 过 滤 选 择 器 , 见 表 9-3 。 
表 9-3 基本 过 滤 选 择 器 
选择 器 描 述 返 回 示例 

:first 匹配 第 一 个 元 素 单个 元 素 $ ("div:first") 
:last 匹配 最 后 一 个 元 素 单个 元 素 $ ("span:last") 
:even 匹配 索引 是 偶数 的 元 素 ,索引 从 0 开始 集合 元 素 $("liseven") 
: odd 匹配 索引 是 奇数 的 元 素 ,索引 从 0 开始 集合 元 素 $ ("li:odd") 
:eq(index) | 匹配 索引 等 于 index 的 元 素 , 索 引 从 0 开始 单个 元 素 $ ("input:eq(2)") 
:gt(index) | 匹配 索引 大 于 index 的 元 素 .索引 从 0 开始 集合 元 素 $ ("input: gt(1)") 
:lt(index) | 匹配 索引 小 于 index 的 元 素 ,索引 从 0 开始 集合 元 素 $ ("input:lt(5)") 
:header 匹配 所 有 hl ,h2,… 等 标题 元 素 集合 元 素 $(":header") 
:animated “| 匹配 所 有 正在 执行 动画 的 元 素 集合 元 素 $ ("div:animated") 











@ 内 容 过 滤 选 择 器 , 见 表 9-4。 
表 9-4 内 容 过 滤 选 择 器 























选择 器 描述 返 回 示 例 
:contains(text) 匹配 含有 文本 内 容 text 的 元 素 ol 合 元 素 $("p:contains( 今 天 ) ”) 
:empty 匹配 不 含 子 元 素 或 文本 元 素 的 空 元 素 | 集合 元 素 $ ("p:empty") 
whatedleeioD) 匹配 包含 selector 元 素 的 元 素 合 元 素 $ndiv,hastapany"y 
:parent 匹配 含有 子 元 素 或 文本 的 元 素 合 元 素 $("div:parent") 
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@ 可见 性 过 滤 选 择 器 , 见 表 9-5。 
表 9-5 可 见 性 过 滤 选 择 器 








选择 器 描 述 返回 示 例 
:hidden 匹配 所 有 不 可 见 的 元 素 集合 元 素 $ (":hidden") 
:visible 匹配 所 有 可 见 元 素 集合 元 素 $(":visible") 














@ 属性 过 滤 选 择 器 , 见 表 9-6 。 
表 9-6 ”属性 过 滤 选 择 器 























选择 器 描 述 返 回 示 例 
[attr] 匹配 拥有 此 属性 的 元 素 合 元 素 $ ("img[alt]") 
[attr= value] 匹配 属性 值 为 value 的 元 素 ol 合 元 素 $ ("a[title= test]") 
[attr! =value] 匹配 属性 值 不 等 于 value 的 元 素 合 元 素 $("a[title! 一 test]") 
[attr^= value] 匹配 属性 值 以 value 开头 的 元 素 合 元 素 $ ("img[alt^= welcome]") 
[attr $ = value] 匹配 属性 值 以 value 结尾 的 元 素 合 元 素 $("img[alt$ 一 last]") 
[attr * 一 value] 匹配 属性 值 中 含有 value 的 元 素 ol 合 元 素 $ ("div[title x = testj") 
[attrl][attr2]… 通过 多 个 属性 进行 匹配 ol 合 元 素 $("div[id][title * = test]") 














(4) 表单 选择 器 , 见 表 9-7。 
































表 9-7 表单 选择 器 

选择 器 描 述 返 回 示 例 
:input 匹配 所 有 input、textarea、select、button 元 素 合 元 素 $ ("input") 
:text 匹配 所 有 文本 框 合 元 素 $ ("text") 
:password 匹配 所 有 密码 框 ol 合 元 素 $ (":password") 
:radio 匹配 所 有 单 选 框 集合 元 素 $(":radio") 
:checkbox 匹配 所 有 复 选 框 集合 元 素 $ ("checkbox") 
:submit 匹配 所 有 “提交 ”按钮 集合 元 素 | $(":submit") 
:image 匹配 所 有 图 像 按钮 集合 元 素 $(":image") 
:reset 匹配 所 有 “ 重 置 "按钮 集合 元 素 $ (":reset") 
:button 匹配 所 有 按钮 集合 元 素 $ (":button") 
:file 匹配 所 有 上 传 域 集合 元 素 | $(":file") 











9.3 jQuery 中 元 索 属 性 的 操作 


对 于 下 面 这 样 一 个 标签 元 素 : 


<img id 一 "imgLogo"” src="../img/imgTsinghuaLogo. jpg" alt 一 "Tsinghua" class 一 "myClass”title 一 
"Tsinghua" width 一 "150" height="150" /> 
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通常 将 id、src、alt、class 称 为 属性 ,也 即 元 素 属性 。 但 是 , 当 浏 览 器 对 标签 元 素 进行 解析 时 ， 
会 将 元 素 解析 为 DOM 对 象 ,相应 地 ,元素 属 性 也 就 解析 为 DOM 属性。 元素 属性 和 DOM 





属性 只 是 在 对 其 进行 不 同 解析 时 的 不 同 称呼 。 


注意 : 
(1) 元 素 被 解析 成 DOM 时 ,元 素 属性 和 DOM 属性 并 不 一 定 是 原来 的 名 称 。 
例如 ,img 的 class 属性 ,在 表现 为 元 素 属性 时 是 class; 在 表现 为 DOM 属性 时 ,属性 名 


为 className。 
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被 选 


(2) 在 JavaScript 中 ,可 以 直接 获取 或 设置 DOM 属性 。 
1 设置 元 素 属性 


在 jQuery 中 ,提供 了 attr() 函 数 来 操作 元 素 属性 。 用 $ (selector). attr(attribute) 返 回 


元 素 的 属性 值 。 $ (selector). attr(attribute,value) 设置 被 选 元 素 的 属性 值 。 
例 9-1 设置 图 像 的 width 属性 。 

=html> 

=head> 

一 script type= "text/javascript" src="../jquery/jquery.js"><=/script> 





script type= "text/javascript"> 
$ (document). ready(function() { 
$ ("button"). click(function( ){ 
$ ("img").attr("width", "160"); 
}); 
)3 
/script> 
</head> 
=body> 
一 img src="../img/logo.jpg" /> 
<br /> 
一 button 二 设置 图 像 的 width 属性 二 /button 二 
=/body> 
=/html> 


运行 结果 如 图 9-1 所 示 , 单 击 按钮 ,图 像 的 width 属性 像素 268px 变 成 了 160px。 





SS 
设置 图 像 的 width 属性 设置 图 像 的 width 属性 
(a) 设置 前 (b) 设置 后 


图 9-1 设置 图 像 的 width 属性 
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9.3.2 删除 元 素 属 性 


在 某 些 情况 下 ,需要 删除 文档 中 某 个 元 素 的 特定 属性 ,可 以 使 用 removeAttr() 方 法 来 实现 。 
例 9-2 删除 元 素 属性 。 
<html> 


=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"></script> 





一 script type= "text/javascript"> 
$ (document) . ready(function() { 
$ ("button"). click(function() { 
$("p").removeAttrC"style") ; 
)); 
DD; 
二 /Script 一 
二 /head 一 


一 body 二 

一 p style 二 "font-size:150% ;color:red" 二 这 是 第 一 段落 P 一 /p> 
一 pb style 二 "font-size:100% ;color:blue" 二 这 是 第 二 段落 P 一 /p 二 
二 button 二 删除 所 有 p 元 素 的 style 属性 二 /button 二 

=/body> 

=</html> 


运行 结果 如 图 9-2 所 示 。 











这 是 第 一 段落 P 这 二 

这 是 第 二 段落 P 这 是 第 二 段落 P 

| 型 除 所 有 p 元 素 的 style 属性 | | 删除 所 有 p 元 素 的 style 属性 | 
(a) 删除 前 (b) 删除 后 


图 9-2 删除 元 素 属性 
可 以 使 用 removeAttr() 删 除 元 素 属性 ,但 其 对 应 的 DOM 属性 是 不 会 被 删除 掉 的 ,只 是 
被 改变 其 值 而 已 。 上 例 中 删除 元 素 段落 p 的 属性 ,会 导致 p 属性 值 从 设 定 值 变 成 了 浏览 器 
的 默认 值 ,但 段落 p 属性 本 身 不 会 从 元 素 中 删除 。 
9.4 jQuery 中 样式 类 的 操作 
通过 jQuery, 可 以 很 容易 地 对 CSS 元 素 进行 操作 。 


9.4.1 添加 样式 类 


addClass() 方 法 向 匹配 的 元 素 添加 指定 的 类 名 。addClass() 方法 向 被 选 元素 添 加 一 个 
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或 多 个 类 。 该 方法 不 会 移 除 已 存在 的 class 属性 ,仅仅 添加 一 个 或 多 个 class 属性 。 如 需 添 
加 多 个 类 ,请 使 用 空格 分 隔 类 名 。 
语法 格式 如 下 : 


$ (selector) .addClass(class) 


class 必需 ,规定 一 个 或 多 个 class 名 称 。 
例 9-3 ”让 某 段 落 增加 设 定 的 样式 类 。 
=html> 


=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"><=/script> 





一 script type= "text/javascript"> 
$ (document). ready(function() { 
$ ("button"). click(function() { 
$ ("p:first").addClass("important"); 
yo 
Ds 
<=/script> 
一 style type= "text/css"> 
.important 
{ 
font-size: 150% ; 
font-weight: bold; 
color: red; 
} 
</style> 
</head> 
=body> 
过 hl 之 标题 1 过 /hl 二 
一 p> 段 落 1 王 /p> 
二 p 二 段落 2 天 /p> 
三 button 二 向 第 一 个 段落 添加 一 个 样式 类 二 /button 二 
=/body> 
=/html> 


对 一 个 段落 加 入 样式 类 important 把 字体 150% 加 粗 和 变 成 红色 。 段 落 1 就 改变 了 , 运 
行 结果 如 图 9-3 所 示 。 


pop 标题 1 











段落 1 段落 1 

段落 2 段落 2 

[ 徊 第 一 个 段落 添加 一 个 样式 类 | [向 第 一 个 段落 添加 一 个 样式 类 
(a) 添加 前 (b) 添加 后 


图 9-3 向 第 一 个 段落 添加 一 个 样式 类 
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9.4.2 移 除 样式 类 


removeClass() 方法 从 被 选 元 素 移 除 一 个 或 多 个 类 。 如 果 没 有 规定 参数 , 则 该 方法 将 
从 被 选 元 素 中 删除 所 有 类 。 
语法 格式 如 下 : 


$ (selector). removeClass(class) 


class 可 选 ,规定 要 移 除 的 class 的 名 称 。 如 需 移 除 若干 类 ,请 使 用 空格 来 分 隔 类 名 。 如 
果 不 设置 该 参数 , 则 会 移 除 所 有 类 。 

例 9-4 让 标题 和 段落 移 除 设 定 的 样式 类 。 

=html> 

=head> 


一 script type= "text/javascript" src="../jquery/jquery.js"></script> 
二 script type= "text/javascript"> 





$ (document). ready(function(){ 
$ ("button"). click(function(){ 
$ ("hl,p").removeClass("blue"); 
}); 

D); 
一 /Script 二 
< 一 style type= "text/css"> 
.important 
{ 

font-size: 150% ; 

font-weight: bold; 

color: red; 
} 
.blue 
{ 

font-size:200% ; 

color: blue; 
} 
</style> 
=/head> 
=body> 
二 hl class 二 "blue" 二 标题 1 二 /hl 二 
二 p class 一 "important" 二 段落 1 一 /p 二 
二 p class 一 "blue" 二 段落 2 一 /p> 
一 button 二 删除 所 有 元 素 的 blue 样式 类 二 /button 二 
二 /body 二 
=/html> 


对 含有 样式 类 blue 的 元 素 进行 删除 操作 ,标题 1 和 段落 2 的 样式 就 删除 了 。 运 行 结果 
如 图 9-4 所 示 。 
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标题 1 
段落 1 标题 1 








a 段落 1 
段落 2 
段落 2 
| 删除 所 有 元 素 的 blue 样 式 类 | | 删除 所 有 元 素 的 blue 样 式 类 | 
(a) 删除 前 (b) 删除 后 


图 9-4 删除 所 有 元 素 的 blue 样式 类 


9.4.3 交替 样式 类 


toggleClass() 对 设置 或 移 除 被 选 元 素 的 一 个 或 多 个 类 进行 切换 。 该 方法 检查 每 个 元 
素 中 指定 的 类 。 如 果 不 存在 则 添加 类 ,如 果 已 设置 则 将 其 删除 。 这 就 是 所 谓 的 切换 效果 。 


不 过 ,通过 使 用 switch 参数 ,能 够 规定 只 删除 或 只 添加 类 。 
语法 格式 如 下 : 


$ (selector). toggleClass(class, switch) 


class 必需 ,规定 添加 或 移 除 class 的 指定 元 素 。 如 需 规定 若干 class, 请 使 用 空格 来 分 


隔 类 名 。switch 可 选 ,布尔 值 默认 为 true, 规 定 是 否 添加 或 移 除 class。 
例 9-5 让 第 二 个 段落 交替 显示 设 定 的 样式 类 。 


=html> 
<head> 


一 script type= "text/javascript" src="../jquery/jquery.js"></script> 


=script type= "text/javascript"> 
$ (document). ready(function( ) { 
$ ("button"). click(function( ) { 
$("p:last").toggleClass("important") ; 
Pys 
)); 
</script> 
一 style type= "text/css"> 
.important 
{ 
font-size:150% ; 
font-weight: bold; 
color: red; 
} 
</style> 
=/head> 
=body> 
二 hl 才 > 标题 1</hl> 
二 p 二 段落 1</p 二 
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二 p 二 段落 2 一 /p> 

< 一 button 二 第 二 个 段落 切换 样式 类 一 /button 二 
</body> 

=/html> 


代码 运行 结果 如 图 9-5 所 示 , 可 以 发 现 段落 2 的 样式 元 素 会 加 载 切 换 important 样 
式 类 。 








_ 标题 1 
标题 1 
段落 1 
段落 1 
段落 2 段落 2 
| 第 二 个 段落 切换 样式 类 | | 第 二 个 段落 切换 样式 类 | 
(a) 切换 前 (b) 切换 后 


图 9-5 第 二 个 段落 切换 样式 类 


9.5 jQuery 中 样式 属性 的 操作 


通过 使 用 CSS 可 以 大 大 提升 网 页 开发 的 工作 效率 ,jQuery 的 CSS 属性 操作 大 大 方便 
了 开发 人 员 对 网 页 的 表现 。 


9.5.1 读 取 样式 属性 


读 取 返回 的 CSS 属性 值 。 语 法 格式 如 下 : 
$ (selector) .cssCname) 


name 必需 ,规定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 ,比如 color。 

返回 第 一 个 匹配 元 素 的 CSS 属性 值 。 当 用 于 返回 一 个 值 时 ,不 支持 简写 的 CSS 属性 ， 
比如 background 和 border。 

例 9-6 取得 第 一 个 段落 的 color 样式 属性 的 值 。 

=html> 


=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"></script> 








<script type= "text/javascript"> 

$ (document). ready(function( ) { 
$ ("button"). click(function() { 

alert( $ ("p").css("color")); 

})); 

)); 

=/script> 

=</head> 


=body> 
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去 hl 之 标题 1 二 /hl1> 

< 一 p style 一 "color:red" 二 段落 1 一 /p> 

二 p style 一 "color:blue" 二 段落 2 二 /p 二 
一 button 二 读 取 段落 的 颜色 一 /button 二 
/body> 

=/html> 


运行 结果 如 图 9-6 所 示 。 这 里 只 返回 了 第 一 个 匹配 的 段落 颜色 : 红色 rgb(255,0,0) 。 


标题 1 








段落 1 JavaScript 提醒 
reb (2s5, 0, 0) 
段落 2 
| 确定 
读 取 段 落 的 颜色 
(a) 读 取 前 (b) 读 取 后 


图 9-6 读 取 段落 的 颜色 


9.5.2 设置 样式 属性 


设置 所 有 匹配 元 素 的 指定 CSS 属性 。 语 法 格式 如 下 : 
$ (selector) .css(name, value) 


name 必需 ,规定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 ,比如 color。 

value 可 选 ,规定 CSS 属性 的 值 。 该 参数 可 包含 任何 CSS 属性 值 ,比如 red。 如 果 设 置 
了 空 字符 串 值 , 则 从 元 素 中 删除 指定 属性 。 

例 9-7 将 第 二 个 段落 的 color、font-size、font-weight 进行 不 同样 式 属性 值 设 置 。 

=html> 

=head> 


=script type 
< 一 script type= "text/javascript"> 


text/javascript" src="../jquery/jquery.js"></script> 





$ (document). ready(function( ){ 
$ ("button"). click(function() { 
$C"p:first").css("color", "red"); 
$C"p:first").css("font-size", "150%"); 
$C"p:last").css({"color":"blue", "font-weight" :"bold") ); 
}); 
D); 
=/script> 
</head> 


=body> 

二 p 二 段落 1 一 /p> 

二 p 二 段落 2 天 /p> 

二 button 祖 改变 段落 的 颜色 字体 大 小 二 /button 二 
=/body> 
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=/html> 
运行 结果 如 图 9-7 所 示 。 
眉 落 1 段落 1 
段落 2 段落 2 
[改变 段落 的 颜色 字体 大 小 | | 改变 段落 的 颜色 字体 大 小 | 
(a) 改变 前 (b) 改变 后 


图 9-7 改变 段落 的 颜色 字体 大 小 


9.5.3 设置 元 素 偏 移 


offset() 方 法 。 它 的 作用 是 获取 元 素 在 当前 视窗 的 相对 偏 移 ,其 中 返回 对 象 包含 两 个 属 
性 , 即 top 和 1left 。 只 对 可 见 元 素 有 效 。 

设置 偏 移 坐 标 是 offset 的 重 载 函 数 。 设 置 所 有 匹配 元 素 的 偏 移 坐 标 , 语 法 格式 如 下 : 

$ (selector). offset( value) 

value 必需 ,规定 以 像素 计 的 top 和 left 坐标 。 可 能 的 值 对 如 {top:100,1left:0)、 带 有 
top 和 left 属性 的 对 象 。 

例 9-8 ”对 两 个 段落 进行 偏 移 操作 ,段落 1 偏 移 (top:100,1eft:100) ,段落 2 偏 移 (top， 
120,left:160)。 运 行 结果 如 图 9-8 所 示 。 


段落 1 

段落 2 设置 新 的 偏 移 

Ce 段落 1 
设置 新 的 偏 移 段落 2 
(a) 偏 移 前 (b) 偏 移 后 





图 9-8 对 两 个 段落 进行 偏 移 操作 


9.6 jQuery 中 元 素 内 容 的 操作 


jQuery 拥有 可 操作 HTML 元 素 和 属性 的 强大 方法 。jQuery 提供 一 系列 与 DOM 相 
关 的 方法 ,这 使 访问 和 操作 元 素 和 属性 变 得 很 容易 。jQuery 还 提供 了 以 下 几 个 方法 来 访问 
或 设置 DOM 元 素 的 内 容 , 包 含 访问 或 设置 这 些 DOM 元 素 的 innerHTML 属性 、 文 本 内 容 
和 value 属性 。 

3 个 简单 实用 的 用 于 DOM 操作 的 jQuery 方法 如 下 。 

(1) text(): 设置 或 返回 所 选 元 素 的 文本 内 容 。 

(2) html(): 设置 或 返回 所 选 元 素 的 内 容 ( 包 括 HTML 标签 ) 。 

(3) val() : 设置 或 返回 表单 字段 的 值 。 
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9.6.1 操作 HTML 代码 


html() 方 法 返回 或 设置 被 选 元 素 的 内 容 (innerHTML)。 如 果 该 方法 未 设置 参数 , 则 返 
回 被 选 元 素 的 当前 内 容 。 
语法 格式 如 下 : 


$ (selector). html(content) 


操作 html 代码 ,操作 的 内 容 要 包括 HTML 的 标签 。 如 写 和 斜体 Hello World 就 是 一 这 
Hello World! =/i> 

例 9-9 对 两 个 段落 的 内 容 进行 设置 。 

=html> 


=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"><=/script> 


中 





二 script type= "text/javascript"> 
$ (document). ready(function(){ 
$ ("button"). click(function() { 
$C"p:first"). html("<i> Hello World!<= /D> "); 
$C"p:last").html("<=b 二 您 好 ,世界 ! 二 /b 二 "); 
)); 
ys 
</script> 
</head> 
=body> 
二 p 二 段落 1</p 二 
一 p> 段 落 2</p> 
去 button 二 改变 段落 的 HTML 内 容 二 /button 二 








=/body> 
=/html> 
</html> 
运行 结果 如 图 9-9 所 示 。 
段落 1 Hello World! 
段落 2 和 您 好 , 世界 ! 
| 改变 段落 的 HTMLR 容 | [改变 段落 的 HTMLR 容 | 
(a) 改变 前 (b) 改变 后 
图 9-9 改变 段落 的 HTML 内 容 
9.6.2 操作 文本 


回 





回 


效 
了 


text() 方 法 设置 或 返回 被 选 元 素 的 文本 内 容 。 当 该 方法 用 于 返回 一 个 值 时 , 它 会 返 
所 有 匹配 元 素 的 组 合 的 文本 内 容 ( 会 删除 HTML 标签 ) , 当 该 方法 用 于 设置 值 时 , 它 会 覆 
被 选 元 素 的 所 有 内 容 。 


内 路 


语法 格式 如 下 : 
$ (selector). text(content) 
例 9-10 对 两 个 段落 p 的 内 容 进行 设置 。 


=html> 
=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"></script> 


< 一 script type= "text/javascript"> 


一 script type= "text/javascript"> 

$ (document). ready(function() { 
$ ("button").click(function(){ 

$C"p").text(" 您 好 ,世界 !1"); 

Ds 

DD; 

<=/script> 

=/head> 


=body> 

<<p> 段 落 1</p 二 

二 p 二 段落 2</p>> 

二 button 记 改变 所 有 p 元 素 的 文本 内 容 二 /button 二 








=/body> 
=/html> 
运行 结果 如 图 9-10 所 示 。 
段落 1 您 好 , 世界 ! 
段落 2 您 好 , 世界 ! 
[改变 所 有 p 元 素 的 文本 内 容 | [改变 所 有 p 元 素 的 文本 内 容 | 
(a) 改变 前 (b) 改变 后 


图 9-10 改变 所 有 p 元 素 的 文本 内 容 


9.6.3 操作 表单 元 素 的 值 


jQuery 选择 器 -3 





val() 函数 用 于 设置 或 返回 当前 jQuery 对 象 所 匹配 的 DOM 元 素 的 value 值 。val() 方 
法 与 HTML 表单 元 素 一 起 使 用 。 该 函数 常用 于 设置 或 获取 表单 元 素 的 value 属性 值 。 例 


如 ,二 input 记 ,二 textarea 记 ,过 select 祖 、 过 option 祖 ,过 button 记 等 。 
语法 格式 如 下 : 


$ (selector). val(content) 
例 9-11 对 表单 的 内 容 进行 设置 。 


=head> 
script type= "text/javascript" src="../jquery/jquery.js"></script> 


=script type= "text/javascript"> 
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$ (document) . ready(function() { 
$ ("button").click(function() { 
$ ("div").text(" 书 籍 作者 "); 
$ (book) .val("JQuery"); 
$ (desc) .val(" 清 华 大 学 出 版 社 "); 
$ ("input:radio, input:checkbox").each(function () { $ (this) .attrCchecked'false); } ); 
// 先 将 radio、checkbox 都 置 空 
$ ("input: radio[value= female] ").attr('checked', true) ; 
$ (input:checkbox"’ .slice(1,3).attrCchecked'，Ytrue") ; 
$ ("select").val(["tsinghua" , "peking"]); 
}); 
)}); 
/script> 


=body> 

<div></div> 

<div><=/div> 

书 名 : 一 input id 一 "book" name 一 "book" type="text" /><br><br> 

描述 : 二 input id 一 "desc" name 一 "desc" type 一 "text" /全 二 br> 二 br 

性 别 : 一 input name 二 "gender" type 二 "radio" checked 一 "checked" value 一 "male" 二 男 
"female" 二 女 一 br>> 王 br> 








二 input nam 





gender" type= "radio" value 
书籍 : 二 input name 一 "pp"” type 一 "checkbox" value 二 "100" checked 一 "checked" 二 100 页 
< 一 input name= "pp" type 一 "checkbox" value 王 "200" 二 200 页 
一 input name= "pp" type 一 "checkbox" value 王 "300" 二 300 页 二 br 二 二 br> 
一 select id 一 "publish" multiple= "multiple"> 
< 一 option value 一 "tsinghua" 过 清华 大 学 出 版 社 一 /option> 
< 一 option value 一 "peking" 二 北京 大 学 出 版 社 一 /option 
所 option value 二 "phei" 志 电子 工业 出 版 社 二 /option 二 
</select><br><br> 
二 button 记 改变 Form 元 素 的 内 容 二 /button 
=/body> 
=/html> 


单 击 按钮 后 运行 结果 如 图 9-11 所 示 。 




























































































书籍 作者 

书籍 作者 
书 名 ， 书 名 |jQuery 
描述 ， 描述 ， 了 清华 大 学 出 版 社 
性 别 ，@ 男 目 女 性 别 ， 目 男 @ 女 
书籍 ， 回 100 页 目 200 页 目 300 页 书籍 ， 目 100 页 回 200 页 回 300 页 
清华 大 学 出 版 社 ~ = 
北京 大 学 出 版 社 
电子 工业 出 版 社 电子 工业 出 版 社 
改变 Form 元 素 的 内 容 改变 Form 元 素 的 内 容 

(a) 改变 前 (b) 改变 后 


9-11 改变 Form 元 素 的 内 容 
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9.7 苯 选 与 查找 元 素 集 中 的 元 素 


jQuery 遍历 ,用 于 根据 其 相对 于 其 他 元 素 的 关系 来 “查找 (或 选取 )HTML 元 素 。 以 
某 项 选择 开始 ,并 沿 着 这 个 选择 移动 ,直到 抵达 期 望 的 元 素 为 止 。 

图 9-12 展示 了 一 棵 家 族 树 。 通 过 jQuery 遍历 ,能 够 从 被 选 (当前 的 ) 元 素 开 始 ,轻松 地 
在 家 族 树 中 向 上 移动 (祖先 ) ,向 下 移动 (子孙 ) ,水 平移 动 (同胞 )。 这 种 移动 被 称 为 对 DOM 
进行 遍历 。 

























































































<div> 
<ul> 
<li> <li> 
<span> <span> <b> 
图 9-12 家 族 树 


(1) 二 div 二 元 素 是 二 ul 二 的 父 元 素 , 同 时 是 其 中 所 有 内 容 的 祖先 。 

(2) 二 ul 过 元素 是 过 li 二 的 父 元 素 , 同 时 是 之 div 二 的 子 元 素 。 

(3) 左边 的 二 li> 元 素 是 二 span> 的 父 元 素 `<ul> 的 子 元 素 , 同 时 是 二 div 的 
后 代 。 

(4) 一 span> 元 素 是 一 li 的 子 元 素 , 同 时 是 <ul> 和 < 二 div> 的 后 代 。 

(5) 两 个 二 li> 元 素 是 同胞 (拥有 相同 的 父 元 素 )。 

(6) 右边 的 到 li> 元 素 是 二 b> 的 父 元 素 、 二 ul 的 子 元 素 , 同 时 是 二 div> 的 后 代 。 

(7) 二 b> 元 素 是 右边 的 一 li 的 子 元 素 , 同 时 是 <ul> 和 二 div> 的 后 代 。 

提示 : 祖先 是 父 、 祖 父 、 曾 祖父 等 。 后 代 是 子 、 孙 、 曾 孙 等 。 同 胞 拥有 相同 的 父 。 

(1) eq( ) 

筛选 指定 索引 号 的 元 素 。 

语法 格式 如 下 : 


eq(index|-index) 


索引 号 从 0 开始 , 若 为 负 值 , 则 从 最 后 一 个 开始 倒数 ,最 后 一 个 从 一 1 开始 。 


$("p").eq(1); // 如 果 选 择 器 改 为 $("p").eq(-1), 则 “我 是 第 四 个 P" 会 被 选中 
=<div> 

二 p> 我 是 第 一 个 P</p 二 

二 p>> 我 是 第 二 个 P</p>>“// 会 被 选中 ,索引 值 为 1 

二 p 过 我 是 第 三 个 P</p 二 

二 p 志 我 是 第 四 个 P</p> 
</div> 
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(2) firstt ) 
筛选 出 第 一 个 匹配 的 元 素 。 
语法 格式 如 下 : 


first() 
此 方法 没有 参数 。 


$C"p"). first(); 
<div> 
二 p 二 我 是 第 一 个 P</p // 索 引 值 是 0, 是 第 一 个 ,会 被 选中 
<<p> 我 是 第 二 个 P<</p> 
一 p> 我 是 第 三 个 P 一 /p> 
二 p> 我 是 第 四 个 P 一 /p> 
</div> 


(3) last( ) 
筛选 出 最 后 一 个 匹配 的 元 素 。 
语法 格式 如 下 : 


last() 
此 方法 没有 参数 。 


$"Pp"). last(); 
<div> 

二 p> 我 是 第 一 个 P</p 

二 p> 我 是 第 二 个 P</p 二 

二 p 二 我 是 第 三 个 P</p 二 

二 p 二 我 是 第 四 个 P</p 二 // 最 后 一 个 ,会 被 选中 
</div> 


(4) hasClass( ) 


检查 匹配 的 元 素 是 否 含 有 指定 的 类 。 
语法 格式 如 下 : 


hasClass(class) 


class 为 类 别名 。 返 回 布尔 值 。 


if($("p").hasClassC"p2")){ 
alert(" 我 里 面 含有 class 一 p2 的 元 素 ") ; /* 会 弹出 存在 class 二 "p2" 的 元 素 */ 
} 
=div> 
二 p> 我 是 第 一 个 P</p 
二 p class 一 "p2" 二 我 是 第 二 个 P 一 /p> 
一 p> 我 是 第 三 个 P 一 /p> 
去 p> 我 是 第 四 个 P</p> 
=</div> 


(5) filterC ) 
筛选 出 与 指定 表达 式 匹 配 的 元 素 集合 。 
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语法 格式 如 下 : 
filterCexpr|objlele|fn) 


expr: 匹配 表达 式 。obj: jQuery 对 象 ,用 于 匹配 现 有 元 素 。ele: 用 于 匹配 DOM 元 素 。 
fn: function 返回 值 作为 匹配 条 件 。 


$C"p"). filter(". p2"); 
=div> 
过 p> 我 是 第 一 个 P</p 二 
过 p class 一 "p2" 过 我 是 第 二 个 P 一 /p> // 会 被 选中 , class 一"p2" 
<<p> 我 是 第 三 个 P</p> 
到 p> 我 是 第 四 个 P</p 二 
</div> 


(6) is( ) 


检查 元 素 是 否 参数 里 能 匹配 上 的 。 
语法 格式 如 下 : 


is(expr|obj|elelfn) 


expr: 匹配 表达 式 。obj: jQuery 对 象 , 用 于 匹配 现 有 元 素 。ele: 用 于 匹配 DOM 元 素 。 
fn: function 返回 值 作为 匹配 条 件 。 


$ ($C"p"). first(O) .is(". p2")){ 

alert(" 不 会 弹出 ,因为 第 一 个 P 的 class 不 等 于 p2"); 

} 

<div> 
一 p> 我 是 第 一 个 P</p> 
过 p class 一 "p2" 过 我 是 第 二 个 P<</p> // 会 被 选中 , class 一"p2" 
<p> 我 是 第 三 个 P 一 /p> 
去 p> 我 是 第 四 个 P</p 二 

</div> 


(7) map( ) 
把 每 个 元 素 通过 函数 传递 到 当前 匹配 集合 中 ,生成 包含 返回 值 的 新 的 jQuery 对 象 。 
语法 格式 如 下 : 


map(callback) 


将 一 组 元 素 转换 成 其 他 数组 (不 论 是 否 是 元 素数 组 )。 可 以 用 这 个 函数 来 建立 一 个 列 
表 , 不 论 是 值 . 属 性 还 是 CSS 样式 ,或 者 其 他 特别 形式 ,都 可 以 用 "$. map() "来 方便 地 建立 。 

$ .map( [0,1,2]，functionCn){ 

returnn 十 5; // 将 原 数 组 中 每 个 元 素 加 5 转换 为 一 个 新 数组 

让) 

// 结 果 : 

[5, 6, 7] 

(8) has() 

筛选 出 包含 指定 子 元 素 的 元 素 。 
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请 法 格式 如 下 : 
has(expr|ele) 
expr: 选择 表达 式 。ele: 选择 DOM 元 素 。 


$ ("div"). has("p"); 
<div> // 本 div 会 被 选中 ,因为 该 div 含有 p 子 元 素 
去 p> 我 是 第 一 个 P</p> 
< 一 p class 一 "p2" 盖 我 是 第 二 个 P 一 /p> 
二 p 二 我 是 第 三 个 P</p 二 
二 p 二 我 是 第 四 个 P</p 二 
</div> 
=div> 
一 span 二 我 是 一 个 span 一 /Span 一 
</div> 


(9) not( ) 
排除 能 够 被 参数 匹配 的 元 素 。 
语法 格式 如 下 : 


not(expr|ele|{n) 
expr: 选择 表达 式 。ele: 选择 DOM 元 素 。fn: 作用 还 不 清楚 。 


$("p").not(".p2"); 


<div> 
二 p> 我 是 第 一 个 P</p 二 // 会 被 选中 ,没有 class 一 p2 
过 p class 一 "p2" 盖 我 是 第 二 个 P</p> /* 不 会 被 选中 ,因为 有 class 一 p2 被 not(".p2") 排 除了 * / 
二 p> 我 是 第 三 个 P</p 二 // 会 被 选中 ,没有 class 一 p2 
二 p 二 我 是 第 四 个 P</p 二 // 会 被 选中 ,没有 class 一 p2 
</div> 


(10) slice( ) 
从 指定 索引 开始 ,截取 指定 个 数 的 元 素 。 
语法 格式 如 下 : 


slice(start, [end]) 


start: 开始 位 置 。end: 可 选 ,结束 位 置 ,不 包含 结束 位 置 的 元 素 。 如 果 不 指 定 , 则 匹配 


到 最 后 一 个 。 
$("p").slice(1,3); 
=div> 
二 p 二 我 是 第 一 个 P</p 二 // 不 会 被 选中 ,索引 为 0 
二 p class 一 "p2" 过 我 是 第 二 个 P 一 /p> // 会 被 选中 ,索引 为 1 
< 二 p> 我 是 第 三 个 P 一 /p> // 会 被 选中 ,索引 为 2 
< 二 p> 我 是 第 四 个 P</p 二 // 不 会 被 选中 ,索引 为 3, 但 是 不 包括 这 个 
</div> 


(11) children( ) 
筛选 获取 指定 元 素 的 资源 。 
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语法 格式 如 下 : 
children(expr) 


获取 指定 元 素 的 资源 ,expr 为 子 元 素 筛选 条 件 。 


$ ("div").children(". p2"); 
<div> 
二 p 二 我 是 第 一 个 P</p>  /* 不 会 被 选中 ,虽然 是 div 的 子 元 素 , 但 是 没有 class 一 p2* / 
过 p class 一 "p2" 盖 我 是 第 二 个 P</p 二 > ”/* 会 被 选中 ,既是 p 的 子 元 素 , 又 有 class 一 p2* / 
去 p> 我 是 第 三 个 P</p> ”/* 不 会 被 选中 ,虽然 是 div 的 子 元 素 ,但 是 没有 class 一 p2* / 
二 p> 我 是 第 四 个 P 一 /p>> ”/* 不 会 被 选中 ,虽然 是 div 的 子 元 素 ,但 是 没有 class 一 p2* / 
</div> 
(12) closest( ) 
从 当前 元 素 开始 ,返回 最 先 匹 配 到 的 符合 条 件 的 父 元 素 。 
语法 格式 如 下 : 


closest(expr) 


expr 为 筛选 条 件 , 沿 DOM 树 向 上 遍历 ,直到 找到 已 应 用 选择 器 的 一 个 匹配 为 止 。 返 回 
包含 零 个 或 一 个 元 素 的 jQuery 对 象 。 





$ ("span"). closest("p", "div"); 
<div> // 不 会 被 选中 ,被 P 抢 了 先 机 
二 p 二 我 是 第 一 个 P /*p 会 被 选中 ,因为 p 符 合 条 件 ,而 且 是 最 先 匹 配 到 的 ,虽然 div 也 符合 
条 件 了 ,但 是 div 不 是 最 先 匹 配 到 的 .因此 div 不 会 被 选中 * / 
二 span> 我 是 P 里 的 span</span 
/p> 
</div> 


(13) find( ) 


从 指定 元 素 中 查找 子 元 素 。 
语法 格式 如 下 : 


find(expr|obj|ele) 
expr: 匹 配 表达 式 。obj: 匹配 jQuery 对 象 。ele: 匹配 DOM 元 素 。 


$ Cdiv"). find(". p2"); 
<div> 
去 p> 我 是 第 一 个 P</p> ”/* 不 会 被 选中 ,虽然 是 div 的 子 元 素 ,但 是 没有 class 一 p2* / 
二 p class 一 "p2" 人 我 是 第 二 个 P</p> /* 会 被 选中 ,既是 p 的 子 元 素 ,又 有 class 一 p2*/ 
< 去 p> 我 是 第 三 个 P</p> 。 /* 不 会 被 选中 ,虽然 是 div 的 子 元 素 , 但 是 没有 class 一 p2*/ 
所 p> 我 是 第 四 个 PE 一 /p> ”/* 不 会 被 选中 ,虽然 是 div 的 子 元 素 , 但 是 没有 class 一 p2* / 
</div> 


(14) next( ) 
获取 指定 元 素 的 下 一 个 兄弟 元 素 。 
语法 格式 如 下 : 


next(expr) 
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expr: 可 选 ,筛选 条 件 , 如 果 下 一 个 兄弟 元 素 不 符合 该 条 件 , 则 返回 


册 


$(".p2").next(); 
=<div> 
二 p 二 我 是 第 一 个 P</p 二 
二 p class 一 "p2" 盖 我 是 第 二 个 P</p 二 


二 p 过 我 是 第 三 个 P<</p> // 是 .p2 的 next 
一 p class 一 "p4" 二 我 是 第 四 个 P 一 /p> 
</div> 


(15) nextAll( ) 
获取 其 后 的 所 有 兄弟 元 素 。 
语法 格式 如 下 : 


nextAll (expr) 
expr: 可 选 ,筛选 条 件 , 获 取 其 后 符合 expr 条 件 的 所 有 兄弟 元 素 。 


$(".p2").nextAll() ; 
<div> 
去 p> 我 是 第 一 个 P<</p>> 
<<p class 一 "p2" 过 我 是 第 二 个 P<</p> 


去 p> 我 是 第 三 个 P</p> // 会 被 选中 ,是 .p2 后 面 的 兄弟 元 素 
< 一 p class 一 "p4" 二 我 是 第 四 个 P 一 /p> // 会 被 选中 ,是 .p2 后 面 的 兄弟 元 素 
</div> 


(16) nextUntil( ) 
获取 其 后 的 元 素 , 直 到 参数 能 匹配 上 为 止 , 不 包括 结束 条 件 的 元 素 。 
语法 格式 如 下 : 


nextUntil( [expr|ele][,fi]) 
expr: 筛选 表达 式 。ele: 筛选 DOM 元 素 ,注意 不 包括 参数 里 的 。 


$ (".p2").nextUntil(". p4"); // 注 意 此 方法 并 不 会 包括 .p4 
<div> 

二 p 志 我 是 第 一 个 P</p 二 

<<p class 二 "p2" 志 我 是 第 二 个 P</p> 


二 p> 我 是 第 三 个 P</p 二 // 会 被 选中 ,是 .p2 后 面 的 兄弟 元 素 
二 p class 一 "p4" 志 我 是 第 四 个 P 一 /p 二 /* 不 会 被 选中 ,作为 结束 条 件 , 但 不 被 包括 * / 
</div> 


(17) offsetPosition( ) 
返回 第 一 个 用 于 定位 的 祖先 元 素 , 即 查找 祖先 元 素 中 position 为 relative 或 absolute 的 元 素 。 
语法 格式 如 下 : 


offsetPosition() 


此 方法 没有 参数 。 由 于 CSS 的 绝对 定位 的 定位 基准 是 相对 最 近 的 一 个 已 定位 元 素 , 因 
此 此 方法 的 作用 不 言 而 喻 。 


$ ("span").offsetParent(); 
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一 div style= "position: relative"> // 选 中 的 是 div, 因此 div 是 已 定位 元 素 
<p> 
二 span 二 我 是 一 个 span 一 /span 一 
</p> 
</div> 


(18) parent( ) 
获取 指定 元 素 的 直接 父 元 素 。 
语法 格式 如 下 : 


parent(expr) 


expr 为 筛选 条 件 ,如 果 直 接 父 元 素 不 符合 条 件 , 则 不 返回 任何 元 素 (无 论 它 的 祖先 是 否 
具有 能 与 expr 匹配 的 条 件 ) 。 


$ ("span"). parent(); 
div style= "position: relative"> 
> // 是 span 的 直接 父 元 素 , 会 被 匹配 到 
一 span 二 我 是 一 个 span 一 /span 一 
</p> 
</div> 
(19) parents( ) 
获取 指定 元 素 的 所 有 祖先 元 素 , 一 直到 二 body 之 一 /body>。 


语法 格式 如 下 : 
parents(expr) 
expr 为 筛选 条 件 ,如 果 某 个 祖先 元 素 不 符合 expr 则 排除 。 


$ ("span"). parents(); 
=div style= "position: relative"> 
/* 是 span 的 祖先 元 素 , 也 会 被 匹配 到 .另外 二 body 之 二 /body 二 也 会 被 匹配 到 * / 
<p> // 是 span 的 直接 父 元 素 ,会 被 匹配 到 
去 span 盖 我 是 一 个 span</span 一 

</p> 
</div> 
(20) parentsUntil( ) 
获取 指定 元 素 的 祖先 元 素 , 直 到 参数 里 的 条 件 能 匹配 到 为 止 。 
语法 格式 如 下 : 


parentsUntil(expr) 
expr 为 停止 参数 ,一 直 匹 配 到 expr 为 止 ,同时 参数 的 条 件 是 不 会 被 匹配 中 的 。 


$ ("span"). parentsUntil("div"); 


=div style= "position: relative" > /* 是 span 的 祖先 元 素 , 但 是 作为 停止 条 件 ,也 不 会 被 选中 * / 
<p> // 是 span 的 直接 父 元 素 ,会 被 选中 
所 span> 我 是 一 个 span< 一 /span 一 
</p> 


</div> 


-3 --- JavaScript+jQuery Web 交 互 程序 设计 ------------------------------------------------------ 


(21) prev( ) 


获取 指定 元 素 的 前 一 个 兄弟 元 素 。 
语法 格式 如 下 : 


prev(expr) 
expr: 可 选 , 当 上 一 个 兄弟 元 素 不 符合 参数 中 的 条 件 时 ,不 返回 任何 元 素 。 


$C".p2"). prev(); 
=div> 
二 p> 我 是 第 一 个 P</p // 会 被 选中 ,是 .p2 的 前 一 个 元 素 
<p class= 二 "p2" 过 我 是 第 二 个 P</p 二 
二 p 二 我 是 第 三 个 P</p> 
二 p class 二 "p4" 二 我 是 第 四 个 P 一 /p 二 
</div> 


(22) prevAll( ) 


获取 指定 元 素 前 面 的 所 有 兄弟 元 素 。 
语法 格式 如 下 : 


prevAll(expr) 
expr: 可 选 ,排除 所 有 不 能 够 被 expr 匹配 上 的 元 素 。 


$(".p4").prevAll(".p2"); 

<div> 
去 p> 我 是 第 一 个 P</p> /x* 不 会 被 选中 ,虽然 是 .p4 前 面 的 兄弟 元 素 , 但 是 没有 class 一 p2* / 
< 一 p class 二 "p2" 志 我 是 第 二 个 P 一 /p> /* 会 被 选中 ,既是 .p4 前 面 的 兄弟 元 素 , 又 有 class 一 p2* / 
去 p> 我 是 第 三 个 P</p> /* 不 会 被 选中 ,虽然 是 .p4 前 面 的 兄弟 元 素 , 但 是 没有 class 一 p2* / 
二 p class 一 "p4" 二 我 是 第 四 个 P 一 /p> 

</div> 

(23) prevUntil( ) 

获取 指定 元 素 前 面 的 所 有 兄弟 元 素 ,直到 参数 里 的 条 件 能 够 匹配 到 。 参数 条 件 本 身 不 

会 被 匹配 。 
语法 格式 如 下 : 


prevUntil( [exprlele] [fi ) 
expr: 匹配 表达 式 。DOM : 元 素 匹 配 。 


$(".p4").prevUntil(".p2"); 


<div> 
二 p 二 我 是 第 一 个 P</p // 不 会 被 选中 ,到 p2 就 停止 了 
过 p class 二 "p2" 志 我 是 第 二 个 P</p> /* 不 会 被 选中 ,是 停止 条 件 , 不 包括 */ 
二 p> 我 是 第 三 个 P</p 二 /* 会 被 选中 ,在 .p2 前 ,递归 到 此 再 到 .p2* / 
二 p class 一 "p4" 二 我 是 第 四 个 P 一 /p> /= 不 会 被 选中 ,不 可 能 在 自己 前 面 * / 
</div> 


(24) siblings( ) 
获取 指定 元 素 的 兄弟 元 素 , 不 分 前 后 。 





语法 格式 如 下 : 
siblingsCexpr) ; 
expr 为 筛选 条 件 ,不 符合 条 件 的 不 会 被 选中 。 


$C".p2"). siblings(); 


<div> 
二 p 过 我 是 第 一 个 P</p 二 // 会 被 选中 ,是 .p2 的 兄弟 元 素 
过 p class 一 "p2" 志 我 是 第 二 个 P</p // 不 会 被 选中 ,是 自己 
二 p> 我 是 第 三 个 P</p // 会 被 选中 ,是 .p2 的 兄弟 元 素 
二 p class 二 "p4" 志 我 是 第 四 个 P 一 /p> // 会 被 选中 ,是 .p2 的 兄弟 元 素 
</div> 
(25) add( ) 
将 选中 的 元 素 添 加 到 jQuery 对 象 集合 中 。 
语法 格式 如 下 : 


add(expr| elements| html|jQueryObject) 


jQuery 选择 器 --- ,831-- 


expr: 选择 器 表达 式 。elements: DOM 表达 式 。html: HTML 片段 。jQueryObject: 


jQuery 对 象 , 将 jQuery 对 象 集合 在 一 起 方便 操作 。 


$(".p2").add("span").css("background-color","red"); 


<div> 
二 p> 我 是 第 一 个 P</p 
<<p class 一 "p2" 过 我 是 第 二 个 P</p 二 // 会 变 红 


<p> 我 是 第 三 个 P<</p> 

二 p class 二 "p4" 志 我 是 第 四 个 P 一 /p> 
</div> 

所 span 二 我 是 一 个 span 一 /span 二 // 会 变 红 
(26) andSelf( ) 
将 自身 加 到 选中 的 jQuery 集合 中 ,以 方便 一 次 性 操作 。 
语法 格式 如 下 : 


andSelf( ) 


此 方法 无 参数 。 
$ (".p2").nextAll().andSelf() .css("background-color", "red"); 
=div> 
二 p> 我 是 第 一 个 P</p 二 
二 p class 一 "p2" 过 我 是 第 二 个 P 一 /p> // 会 变 红 ,这 就 是 andSelf() 的 效果 
二 p 二 我 是 第 三 个 P</p 生 // 会 变 红 
二 p class 一 "p4" 过 我 是 第 四 个 P 一 /p> // 会 变 红 
</div> 
(27) end( ) 


将 改变 当前 选择 器 选中 的 操作 回 退 为 上 一 个 状态 。 
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语法 格式 如 下 : 
end( ) 
此 方法 没有 参数 。 
$ (".p2"). next().end().css("background-color", "red"); 
=div> 
二 p> 我 是 第 一 个 P</p 
二 p class 二 "p2" 志 我 是 第 二 个 P</p // 会 变 红 , 这 就 是 end( ) 的 效果 
二 p 二 我 是 第 三 个 P</p /* 不 会 变 红 ,尽管 next() 方 法 之 后 选中 的 是 这 一 
个 ,但 是 由 于 被 end() 方 法 回 退 了 ,因此 是 上 
一 个 */ 


一 p class 一 "p4" 之 我 是 第 四 个 P</p> 
</div> 
(28) contents() 
此 方法 没有 参数 。 
contents() 函 数 的 返回 值 为 jQuery 类 型 ,返回 一 个 新 的 jQuery 对 象 ,该 对 象 包含 了 当 
前 jQuery 对 象 匹配 元 素 的 所 有 子 节点 (包括 元 素 .文本 、 注 释 等 所 有 类 型 的 节点 )。 
只 要 两 个 HTML 标签 之 间 存 在 任何 空白 字符 (空格 ,换行 符 等 ), 就 会 被 视 作文 本 
如 果 元 素 是 一 个 二 iframe 二 , 则 选取 该 文档 的 所 有 文档 节点 。 
如 果 没 有 匹配 的 元 素 , 则 返回 空 的 jQuery 对 象 。 
该 方法 与 children() 方法 类 似 , 不 同 的 是 它 返 回 的 是 文本 和 注释 节点 。 如 果 在 相同 的 
域 中 ,contents() 方法 也 能 访问 iframe 的 HTML。 


$("div") .contents() .filter("em"). wrap("<=b/>"); 
// 查 找到 所 有 div 元 素 内 的 文本 节点 ,并 且 使 用 b 元 素 包 衷 它们 


综合 案例 ,请 扫 一 扫 





课 后 练习 

1. 编写 程序 ,实现 将 网 页 中 所 有 p 元 素 的 背景 颜色 更 改 为 红色 。 

2. 编写 程序 ,选择 二 body 记 元 素 中 每 个 可 见 的 元 素 并 设置 为 不 可 见 。 
3. 编写 程序 ,实现 选取 包含 指定 字符 串 的 元 素 。 


第 10 章 


使 用 jQuery 制作 动画 与 特效 


p23 


学 习 目 标 
掌握 jQuery 常见 动画 与 特效 的 制作 。 
掌握 jQuery 的 编程 方法 。 


10.1 显示 与 隐藏 效果 


10.1.1 隐藏 元 素 的 hide () 方 法 


通过 使 用 hide() 来 隐藏 被 选 的 HTML 元 素 。 

语法 格式 如 下 : 

$ (selector) .hide() 

$ (selector). hide( speed) 

speed 规定 元 素 从 可 见 到 隐藏 的 速度 。 默 认为 0, 是 可 选 参数 ,可 以 取 以 下 值 : 毫秒 ( 比 
如 1500) .normal slow ,fast。 


例 10-1 ”隐藏 一 div> ,体会 不 同 的 隐藏 速度 参数 。 


=html> 
=head> 


script type= "text/javascript" src="../jquery/jquery.js 





><=/script> 





一 script type= "text/javascript" > 
$ (document). ready(function( ) { 
$C"p").click(function() { 
if( $ (this). parent().is(".div1")==true){ $ (this). parent().hide(1500);}; 
if( $ (this). parent().is(".div2")==true){ $ (this). parent().hide("fast");}; 
if( $ (this). parent().is(".div3")==true){ $ (this). parent().hide("normal");}); 
if( $ (this). parent() .is(".div4")==true){ $ (this). parent().hide("slow");}; 








}); 
Ds 
</script> 
</head> 
=body> 
二 h3 class 二 "publishing1" 记 清华 大 学 出 版 社 二 /h3 二 
二 div class="divl"> 


去 p> 联 系 人 : 赵 先生 <<br /二 
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单 击 隐藏 speed 王 1500 一 br /> 
</p> 
</div> 
二 h3 class 二 "publishing2" 记 北京 大 学 出 版 社 二 /h3 二 
一 div class= "div2"> 
一 p 二 联系 人 : 钱 先生 二 br /二 
单 击 隐藏 speed 一 fast<br /> 
</p> 
</div> 
二 h3 class 一 "publishing3" 过 中 国人 民 大 学 出 版 社 一 /h3 二 
二 div class="div3"> 
二 p 二 联系 人 : 孙 先 生 二 br /二 
单 击 隐藏 speed 二 normal 二 br /二 
</p> 
</div> 
一 h3 class 一 "publishing4" 过 中 国 农业 大 学 出 版 社 一 /h3 二 
二 div class="div4"> 
二 p 二 联系 人 : 李 先 生 二 br /二 
单 击 隐藏 speed 一 slow 一 br /二 




















</p> 
=/div> 
=/body> 
=/html> 
运行 效果 如 图 10-1 所 示 。 
清华 大 学 出 版 社 
联系 人 ， 赵 先生 
单 击 隐 藏 speed=1500 
北京 大 学 出 版 社 清华 大 学 出 版 社 
联系 人 : 钱 先生 人 : 赵 先 生 
单 击 隐藏 speed=fast 信和 和 son 
中 国人 民 大 学 出 版 社 北京 大 学 出 版 社 
联系 人 ， 和 孙 先 生 
单 击 隐 藏 speed=normal 中 国人 民 大 学 出 版 社 
中 国 农业 大 学 出 版 社 [Re 
联系 人 ， 李 先生 
人 : 生 可 
和 单 击 隐藏 speed=slow 
(a) 隐藏 前 (b) 隐藏 后 
图 10-1 元素 的 隐藏 


10.1.2 显示 元 素 的 show() 方 法 


通过 使 用 show() 方法 来 显示 被 选 的 HTML 元 素 。 


语法 格式 如 下 : 
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$ (selector). show() 
$ (selector). show(speed) 


speed 规定 元 素 从 不 可 见 到 显现 的 速度 。 默 认为 0, 是 可 选 参数 ,可 以 取 以 下 值 : 毫秒 
(比如 1500) .normal slow fast。 

例 10-2 ”对 于 10. 1. 1 小节 隐藏 的 例子 ,在 JavaScript 里 面 增加 一 段 , 单 击 二 h3 之 标题 ， 
让 相应 隐藏 了 的 所 div 之 显现 出 来 ,体会 不 同 的 隐藏 速度 参数 。 

=html> 


=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"></script> 





< 一 script type= "text/javascript"> 


$ (document) .ready(function(){ 
$ ("h3"). click(function() { 





if( $ (this) .is(".publishingl") 一 一 true){ $C".divl").show(1500); }; 
if($(this) .is(".publishing2" 一 { $C".div2").show("fast"); }; 
ifC $ (Cthis) .is(". publishing3" { $C".div3").show("normal"); }; 
if( $ (this).is(". publishing4")= =true){ $(".div4").show("slow"); }; 
Ds 

D); 

</script> 

=</head> 

<body> 


二 h3 class 一 "publishingl" 过 清华 大 学 出 版 社 一 /h3 二 
一 div class 一 "div1" style 一 "display:none" 二 

去 p> 联 系 人 : 赵 先 生生 br /> 

单 击 隐藏 speed 王 1500 一 br /二 

</p> 
</div> 
二 h3 class 一 "publishing2" 过 北京 大 学 出 版 社 一 /h3 二 
一 div class 一 "div2" style="display:none"> 

二 p 二 联系 人 : 钱 先生 <br /二 

单 击 隐藏 speed 一 fast<br /> 

</p> 
</div> 
所 h3 class 一 "publishing3" 之 中 国人 民 大 学 出 版 社 一 /h3 二 
一 div class 一 "div3" style="display:none"> 

二 p 二 联系 人 : 孙 先 生 <=br /二 

单 击 隐藏 speed 一 normal 一 br /二 

</p> 
</div> 
二 h3 class 一 "publishing4" 之 中 国 农业 大 学 出 版 社 一 /h3 二 
一 div class 一 "div4" style= "display:none"> 

<<p> 联 系 人 : 李 先 生 <br /二 

单 击 隐藏 speed 二 slow 二 br /二 

/p> 
</div> 
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一 /body> 
</html> 


10.1.3 交替 显示 隐藏 元 素 


toggle() 方 法 切换 hide() 和 show() ,用 此 方法 检查 元 素 是 否 可 见 , 通 过 使 用 toggle() 方 
法 切换 被 选 元 素 的 hide() 与 show() 方法 。 如 果 元 素 已 隐藏 , 则 运行 show() ;如 果 元 素 可 
见 , 则 运行 hide()。 这 样 就 可 以 创造 切换 效果 。 

语法 格式 如 下 : 

$ (selector). toggle() 

$ (selector). toggle( speed) 

speed 规定 元 素 切 换 显 现 隐藏 的 速度 ,默认 为 "0”, 是 可 选 参数 ,可 以 取 以 下 值 : 毫秒 
(比如 1 500) .normal、slow \fast。 

利用 toggle() 函 数 ,很 容易 对 上 面 的 例子 的 JavaScript 代码 部 分 做 修改 。 

例 10-3 单 击 二 h3 二 标题 ,让 相应 的 二 div 二 隐藏 或 者 显现 出 来 ,体会 不 同 的 toggle() 
速度 参数 。 中 

二 script type= "text/javascript"> 


$ (document). ready(function( ){ 
$ ("h3"). click(function() { 














if( $ (this) .is(".publishingl") 一 一 true){ $(".divl").toggle(1500); }; 
if( $ (this) .is(".publishing2") 一 一 true){ $(".div2").toggle("fast"); }; 
if( $ (this) .is(".publishing3") 一 一 true){ $(".div3").toggle("normal"); }; 
if( $ (this) .is(".publishing4") 一 一 true){ $(".div4").toggle("slow"); }; 
} >; 

}); 

=</script> 

toggle() 方 法 用 于 绑 定 两 个 或 多 个 事件 处 理 器 函数 ,以 响应 被 选 元 素 的 轮流 的 click 

事件 。 
=html> 
=head> 


script type= "text/javascript" src="/jquery/jquery.js"></script> 
一 script type= "text/javascript"> 
$ (document). ready(function( ) { 

$ ("button"). toggle(function() { 


$ ("body").css("background-color", "red");}), 


function() { 
$ ("body").css("background-color", "yellow");), 
function() { 
$ ("body").css("background-color", "blue");} 
); 
}ys 
</script> 
=</head> 
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=body> 

二 button 一 请 单 击 这 里 ,来 切换 不 同 的 背景 颜色 一 /button 一 

</body> 

=/html> 

toggle() 方 法 还 有 另外 两 种 用 法 。 

(1) toggle 事件 绑 定 两 个 或 更 多 函数 。 

当 指 定 元 素 被 单 击 时 ,在 两 个 或 多 个 函数 之 间 轮 流 切换 。 

如 果 规 定 了 两 个 以 上 的 函数 , 则 toggle() 方法 将 切换 所 有 函数 。 例 如 ,如 果 存 在 3 个 
函数 , 则 第 一 次 单 击 将 调用 第 一 个 函数 ,第 二 次 单 击 调用 第 二 个 函数 ,第 三 次 单 击 调用 第 三 
个 函数 。 第 四 次 单 击 再 次 调用 第 一 个 函数 , 依 此 类 推 。 

语法 格式 如 下 : 





$ (selector). toggle(function1(), function2(), functionn(), ...) 


例 10-4 切换 圆 的 背景 颜色 。 


=html> 
=head> 
script type= "text/javascript" src="../jquery/jquery.js"></script> 





script type= "text/javascript"> 
$ (document). ready(function( ){ 
$ ("button"). toggle(function( ) { 
$(".yuan").css("background-color", "red");), 
function( ){ 
$ ("yuan").css("background-color", "yellow");), 
function() { 


$ ("yuan").css("background-color", "green");} 
); 
Ds 
=/script> 
style type= "text/css"> 
.yuan! 
border-radius:50% ; /x* 圆 角 */ 
width: 200px; 
height: 200px; 
background-color: #000000; /初始 黑色 x*/ 
} 
=/style> 
=/head> 
<body> 


<div class="yuan"></div><br /> 

所 p> 单 击 按钮 ,切换 圆 的 背景 颜色 一 /p 二 一 br /全 
一 button>toggle() 切 换 一 /button> 一 br /二 

二 /body 二 

=/html> 


单 击 按钮 ,图 案 圆 背景 的 颜色 从 初始 黑色 开始 , 红 、 黄 、 绿 …… 红 、 黄 、 绿 …… 变 化 ,运行 
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效果 如 图 10-2 所 示 。 





单 击 按钮 ， 切 换 圆 的 背景 颜色 单 击 按钮 ， 切 换 圆 的 背景 颜色 单 击 按钮 ， 切 换 圆 的 背景 颜色 
toggle0 切 换 toggle0 切 换 toggle0 切 换 
(a) 切换 前 (b) 一 次 切换 (c) 两 次 切换 


图 10-2 切换 圆 的 背景 颜色 


(2) 规定 是 否 只 显示 或 只 隐藏 所 有 匹配 的 元 素 。 
语法 格式 如 下 : 


$ (selector). toggle(switch) 


switch 取 值 ,true 为 显示 元 素 ,false 为 隐藏 元 素 。 
例 10-5 显示 或 隐藏 所 匹配 的 元 素 。 


=html> 
=head> 
=script type 


text/javascript" src="../jquery/jquery.js"></script> 





=script type= "text/javascript" > 
$ (document). ready(function() { 
$C".btnl"). click(function( ) { 
$C"p"). toggle(true); 
Fs 
})); 
</script> 
=/head> 
=body> 
二 p 二 这 是 段落 一 </p 二 
二 p style 一 "display:none" 二 (默认 不 显示 ) 这 是 段落 二 一 /p 二 
所 p 二 把 switch 参数 设置 为 true 显示 所 有 段落 ,一 br /二 
设 为 false 可 以 隐藏 所 有 段落 .二 /p 二 
过 button class 一 "btnl" 之 显示 所 有 p 元 素 二 /button 一 
一 /body> 
=/html> 


代码 中 有 3 个 二 p 志 段落, 页面 加 载 段 落 二 设 定 是 display 而 不 显示 。 单 击 按钮 后 ,调用 


toggle(true) ,3 个 段落 都 显示 。 如 果 参 数 是 false, 那 么 单 击 后 3 个 段落 都 不 显示 ,大 家 可 以 
自己 修改 参数 测试 。 运 行 效果 如 图 10-3 所 示 。 
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这 是 段落 一 
这 是 段落 一 《默认 不 显示 ) 这 是 段落 二 
把 switch 参数 设置 为 true 显 示 所 有 段落 ,| i i 显示 本 
生生 a 
显示 所 有 p 元 素 [显示 所 有 p 元 素 | 
(a) 隐藏 元 素 (b) 显示 元 素 


图 10-3 显示 或 隐藏 所 匹配 的 元 素 


10.2 滑动 效果 


通过 jQuery, 可 以 在 元 素 上 创建 滑动 效果 。 
jQuery 拥有 以 下 滑动 方法 。 

(1) slideDown() 。 

(2) slideUp() 。 

(3) slideToggle() 。 


10.2.1 向 上 收缩 效果 


slideUp() 方法 用 于 向 上 滑动 元 素 。 
语法 格式 如 下 : 


$ (selector) ,slideUp(speed) ; 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow fast 或 毫秒 。 
例 10-6 slideUp() 方 法 。 


=html> 

=head> 

=script type 

一 script type= "text/javascript" > 

$ (document). ready( function() { 
$ ("h3"). click(function() { 


text/javascript" src="../jquery/jquery.js"></script> 











if( $ (this) .is(". publishing1")= { $C".divl").slideUp(1500); }; 
if( $ (this) .is(". publishing2" { $C".div2"). slideUp( "fast"); }; 
if( $ (this).is(". publishing3")= =true){ $(".div3").slideUp("normal"); }); 
if( $ (this).is(". publishing4")= =true){ $(".div4").slideUp("slow"); 
D); 

DD); 

=/script> 

=</head> 

=body> 


二 h3 class 二 "publishing1" 记 清华 大 学 出 版 社 二 /h3 二 
二 div class="divl"> 
二 p 二 联系 人 : 赵 先生 二 br /二 
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单 击 向 上 收缩 speed 一 1500<<br /> 
</p> 
</div> 
二 h3 class 二 "publishing2" 记 北京 大 学 出 版 社 二 /h3 二 
<div class= "div2"> 
一 p 二 联系 人 : 钱 先生 二 br /二 
单 击 向 上 收缩 speed 一 fast<br /之 
< /> 
</div> 
一 h3 class 一 "publishing3" 过 中 国人 民 大 学 出 版 社 一 /h3 二 
=div class="div3"> 
二 p 二 联系 人 : 孙 先 生 二 br /二 
单 击 向 上 收缩 speed 二 normal 二 br /二 
</p> 
</div> 
二 h3 class 一 "publishing4" 过 中 国 农业 大 学 出 版 社 一 /h3 二 
二 div class="div4"> 
二 p 二 联系 人 : 李 先 生 一 br /二 
单 击 向 上 收缩 speed= 一 slow 一 br /二 
</p> 
</div> 
=</body> 
=/html> 








10.2.2 向 下 展开 效果 


jQuery slideDown() 方法 用 于 向 下 滑动 元 素 。 
语法 格式 如 下 : 


$ (selector) . slideDown(speed, callback) 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow .fast 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 函数 名 称 。 

例 10-7 slideDown() 方 法 。 

=html> 

=head> 


=script type 
script type= "text/javascript"> 


= "text/javascript" src="../jquery/jquery.js"></script> 





$ (document). ready(function(){ 
$ ("h3"). click(function() { 
if( $ (this) .is(".publishingl") 王 一 true){ $(".divl"). slideDown(1500); }; 
if( $ (this) .is(".publishing2") 王 一 true){ $(".div2").slideDown("fast"); ); 
if( $ (this) .is(".publishing3") 一 一 true){ $(".div3").slideDown("normal"); }; 
if( $ (this) .is(".publishing4") 王 一 true){ $(".div4"). slide。Down("slow"); }; 
)); 
3 
=/script> 
=/head> 
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=body> 
二 h3 class 一 "publishingl" 之 清华 大 学 出 版 社 一 /h3 二 
一 div class= "div]l" style="display:none"> 
二 p 二 联系 人 : 赵 先生 二 br /二 
单 击 向 下 展开 speed 王 1500 一 br /二 
</p> 
</div> 
二 h3 class 一 "publishing2" 过 北京 大 学 出 版 社 一 /h3 二 
二 div class= "div2" style="display:none"> 
二 p 二 联系 人 : 钱 先生 二 br /二 
单 击 向 下 展开 speed 一 fast<br /之 
</p> 
</div> 
二 h3 class 一 "publishing3" 过 中 国人 民 大 学 出 版 社 一 /h3 二 
一 div class 一 "div3" style 一 "display:none" 二 
一 p 二 联系 人 : 孙 先 生 二 br /二 
单 击 向 下 展开 speed 一 normal 一 br /二 
</p> 
</div> 
一 h3 class 一 "publishing4" 过 中 国 农业 大 学 出 版 社 一 /h3 二 
div class 一 "div4" style="display:none"> 
一 p 过 联系 人 : 李 先 生 二 br /二 
单 击 向 下 展开 speed 二 slow 二 br /二 
</p> 
</div> 
</body> 
=</html> 






10.2.3 ”交替 伸缩 效果 


jQuery slideToggle() 方法 可 以 在 slideDown() 与 slideUp() 方法 之 间 进 行 切换 。 
如 果 元 素 向 下 滑动 , 则 slideToggle() 方 法 可 向 上 滑动 它们 。 

如 果 元 素 向 上 滑动 , 则 slideToggle() 方 法 可 向 下 滑动 它们 。 

语法 格式 如 下 : 


$ (selector). slideToggle( speed) 
可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow fast 或 毫秒 。 
例 10-8 slideToggle() 方 法 。 


=html> 
=head> 
一 script type= "text/javascript" src="../jquery/jquery.js"></script> 





script type= "text/javascript"> 
$ (document). ready(function(){ 
$ ("h3").click(function() { 
if( $ (this) .is(". publishingl")= =true){ $C(".divl").show(1500); }; 
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fC $ Cthis) .is(". publishing2")==true){ $C".div2").show "fast"); }; 
if( $ (this) .is(". publishing3")= =true){ $(".div3").show("normal"”); }; 
if($ (this) .is(". publishing4")= =true)( $(".div4").show("slow"); }; 
)); 
)); 


=/script> 
=/head> 


=body> 
二 h3 class 一 "publishingl" 过 清华 大 学 出 版 社 一 /h3 二 
二 div class="divl" style="display:none"> 
二 p 二 联系 人 : 赵 先生 一 br /二 
单 击 交替 伸缩 speed 王 1500 一 br /二 
</p> 
</div> 
所 h3 class 一 "publishing2" 过 北京 大 学 出 版 社 一 /h3 过 
div class 一 "div2" style 一 "display:none" 过 
到 p> 联 系 人 : 钱 先 生生 br /二 
单 击 交替 伸缩 speed 二 fast 二 br /二 
</p> 
</div> 
所 h3 class 一 "publishing3" 之 中 国人 民 大 学 出 版 社 一 /h3 二 
一 div class= "div3" style 一 "display:none" 二 
一 p 二 联系 人 : 孙 先 生 二 br /二 
单 击 交替 伸缩 speed 王 normal 一 br /二 
</p> 
</div> 
达 h3 class 二 "publishing4" 中 国 农业 大 学 出 版 社 二 /h3 二 
<div class 一 "div4" style="display:none"> 
二 p 二 联系 人 : 李 先 生 二 br /二 
单 击 交替 伸缩 speed=slow 一 br /二 
/p> 
</div> 
=/body> 
=/html> 








10.3 淡 入 淡出 效果 


通过 jQuery, 可 以 实现 元 素 的 淡 入 淡出 效果 。 
jQuery 拥有 下 面 4 种 fade 方 法。 

(1) fadeIn() 。 

(2) fadeOut() 。 

(3) fadeToggle() 。 

(4) fadeTo() 。 
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10.3.1 淡 入 效果 


fadeIn() 方 法 用 于 淡 入 已 隐藏 的 元 素 。 
语法 格式 如 下 : 


$ (selector) .fadeIn(speed,callback) 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow fast 或 毫秒 。 
可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 
例 10-9 带 有 不 同 参数 的 fadeIn() 方 法 。 


=html> 
=head> 
script src=".. /jquery/jquery.js">=/script> 
=script> 
$ (document). ready(function() { 
$ ("button"). click(function( ) { 
$C"#divl"). fadelIn(); 
$C"#div2"). fadelIn("slow"); 
$C"#div3"). fadeIn(3000); 
DD); 
Ds 
</script> 
</head> 





=body> 

所 p> 演 示 带 有 不 同 参数 的 fadelIn() 方法 .一 /p> 

二 button 单 击 这 里 ,使 3 个 矩形 淡 入 所 /button 

<br><br> 

<div id 一 "divl” style= "float:left;width:80px;height: 80px; 
background-color:red; display:none; "二 第 一 个 二 /div 二 

<div id 一 "div2" style 一 "float:left; width:80px;height:80px; 
background-color: yellow;display:none;" 二 第 二 个 三 /div 请 

二 div id="div3" style 一 "float:left; width:80px;height:80px; 
background-color: green;display:none; "二 第 三 个 二 /div 二 

=/body> 

=/html> 


10.3.2 ”淡出 效果 


jQuery fadeOut() 方法 用 于 淡出 可 见 元 素 。 
语法 格式 如 下 : 


$ (selector). fadeOut(speed, callback) 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow ,fast 或 毫秒 。 
可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 
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例 10-10 带 有 不 同 参数 的 fadeOut() 方法 。 


=html> 
=head> 
< 一 script src="../jquery/jquery.js"></script> 
=script> 
$ (document) . ready(function(){ 
$ ("button").click(function(){ 
$ ("#div1").fadeOut(); 
$("#div2"). fadeOut("slow"); 
$ ("#div3"). fadeOut(3000); 
DD; 
3 
=/script> 
</head> 





=body> 

二 p 二 演示 带 有 不 同 参数 的 fadeOut() 方法 .二 /p> 

二 button 二 单 击 这 里 ,使 3 个 矩形 淡出 二 /button 二 

<br><br> 

<div id= "div]l" style= "float:left; width:80px; height: 80px; 
background-color:red;" 二 第 一 个 一 /div 二 

<div id 一 "div2" style= "float:left; width:80px; height: 80px; 
background-color: yellow; "二 第 二 个 二 /div 二 

<div id 一 "div3" style 一 "float:left; width:80px;height:80px; 
background-color:greeni; "二 第 三 个 一 /div 二 

=</body> 

=/html> 


10.3.3 ”交替 淡 入 淡出 效果 


jQuery fadeToggle() 方法 可 以 在 fadeIn() 与 fadeOut() 方法 之 间 进 行 切换 。 
如 果 元 素 已 淡出 , 则 fadeToggle() 方 法 会 向 元 素 添 加 淡 入 效果 。 

如 果 元 素 已 淡 入 , 则 fadeToggle() 方 法 会 向 元 素 添 加 淡出 效果 。 

语法 格式 如 下 : 


$ (selector). fadeToggle( speed, callback) 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow、fast 或 毫秒 。 
可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 
例 10-11 带 有 不 同 参数 的 fadeToggle() 方 法 。 


$ ("button"). click(function( ){ 
$("#divl"). fadeToggle(); 
$ ("#div2"). fadeToggle( "slow"); 
$ ("#div3").fadeToggle(3000); 
Ds 
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10.3.4 不 透明 效果 


jQuery fadeTo() 方法 允许 渐变 为 给 定 的 不 透明 度 ( 值 介 于 0 与 1 之 间 ) 。 
语法 格式 如 下 : 


$ (selector). fadeTo( speed, opacity) 


必需 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow \fast 或 毫秒 。 


fadeTo() 方 法 中 必需 的 opacity 参数 将 淡 和 淡出 效果 设置 为 给 定 的 不 透明 度 ( 值 介 于 
0 与 工 之 间 )。 


例 10-12 带 有 不 同 参 数 的 fadeTo() 方 法 。 





$ ("button"). click(function() { 
$C"#divl"). fadeTo("slow",0.15); 
$("#div2"). fadeTo("slow",0.4); 
$("#div3"). fadeTo( "slow",0.7); 
D); 





10.4 自 定义 动画 效果 
10.4.1 自 定义 动画 


jQuery animate() 方法 用 于 创建 自 定义 动画 。 

语法 格式 如 下 : 

$ (selector). animate( {params) , speed) 

必需 的 params 参数 定义 形成 动画 的 CSS 属性 。 

可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : slow ,fast 或 毫秒 。 

默认 情况 下 ,所 有 HTML 元 素 的 位 置 都 是 静态 的 ,并 且 无 法 移动 。 如 需 对 位 置 进 行 操 
作 ,首先 把 元 素 的 CSS position 属性 设置 为 relative ,fixed 或 absolute。 调 用 animate( ) 方 
法 不 仅 可 以 制作 简单 渐渐 变 大 的 动画 效果 ,而 且 还 能 制作 移动 位 置 的 动画 。 

例 10-13 animate( ) 方 法 的 简单 应 用 。 把 二 div 之 元 素 移 动 到 左边 ,直到 left 属性 等 于 
200px 为 止 。 

=html> 

=head> 

script src="../jquery/jquery.js"> 


</script> 
=script> 





$ (document) . ready(function(){ 
$ ("button"). click(function() { 


$ ("div").animate( {left:200px'’)}, "slow"); 
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Ds 
DD; 
</script> 
=/head> 


=body> 

三 button 记 开始 动画 二 /button 二 

二 div style="background:red; height:200px; width:200px; position:absolute; "二 清华 大 学 
</div> 


=/body> 
=/html> 


可 见 ,可 以 用 animate() 方 法 来 改变 CSS 的 属性 值 , 那 是 否 可 以 操纵 所 有 的 CSS 属性 
呢 ? 答案 是 肯定 的 ,不 过 需要 记 住 : 当 使 用 animate() 时 ,必须 使 用 Camel 标签 法 书写 所 有 
的 属性 名 , 比如 ,必须 使 用 paddingLeft 而 不 是 padding-left, 使 用 marginRight 而 不 是 


margin-right, 等 等 。 
10.4.2 动画 队列 


jQuery animate(): 使 用 队列 功能 。 

默认 的 ,jQuery 提供 针对 动画 的 队列 功能 。 这 意味 着 如 果 开 发 人 员 在 彼此 之 后 编写 多 
个 animate() 调用 ,jQuery 会 创建 包含 这 些 方法 调用 的 “内 部 ”队列 。 然 后 逐一 运行 这 些 
animate 调用 。 

例 10-14 动画 队列 。 


=html> 
<head> 
一 script src="../jquery/jquery.js"></script> 
=script> 
$ (document). ready(function( ){ 
$ ("button"). click(function() { 
var div= $ ("div"); 
div. animate( {left:"100px’) , "slow"); 
div.animate( {height:'+ =100px', width:'+ =100px' ); 
div. animate( {fontSize:'3em') , "slow"); 
}); 
Ds; 
=</script> 
</head> 





一 body> 


< 
去 button 一 开始 动画 二 /button 一 

div style 一 "background:red;height:100px; width:100px;position:absolute; "二 清华 大 学 
</div> 
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一 /body> 

=/html> 

上 面 的 实例 是 3 个 动画 队列 。 

(1) 将 二 div 二 向 右 移动 100px。 

(2) 将 二 div 二 的 高 度 、 宽 度 的 值 各 增加 100px。 
(3) 将 二 div 二 内 的 文字 变 大 到 3em。 

运行 效果 如 图 10-4 所 示 。 


10.4.3 


开始 动画 开始 动画 开始 动画 








(a) 向 右 移 动 100 px -| 
(b) div 高 度 和 宽度 各 增加 100 px 





(c) div 内 字体 变 大 到 3 em 


图 10-4 ”队列 功能 


动画 停止 和 延 时 


在 jQuery 中 ,通过 animate() 方 法 可 以 实现 元 素 的 动画 显示 ,但 在 显示 的 过 程 中 ,必须 考虑 
各 种 客观 因素 和 限制 性 条 件 的 存在 ,因此 ,在 执行 动画 时 ,可 通过 stop() 方 法 停止 或 delay() 方 
法 延 时 某 个 动画 的 执行 。stop() 与 delay() 方 法 的 语法 格式 如 下 。 

stop() 方 法 的 语法 格式 如 下 : 


stop([clearQueue] , [gotoEnd]) 


这 个 


方法 的 功能 是 停止 所 选 元 素 正在 执行 的 动画 ,其 中 可 选 参数 clearQueue 是 一 个 布 


尔 值 ,表示 是 否 停止 正在 执行 的 动画 队列 ,默认 是 false, 即 仅 停止 活动 的 动画 ,允许 任何 排 
入 队列 的 动画 向 后 执行 。 

另外 一 个 可 选 参数 gotoEnd 也 是 一 个 布尔 值 .表示 是 否 立 即 完成 正在 执行 的 动画 ,点 
认 是 false,stop() 方 法 会 清除 在 被 选 元 素 上 指定 的 当前 动画 。 

调用 stop() 方 法 停止 当前 所 有 动画 效果 。 

在 动画 完成 之 前 ,停止 当前 正在 执行 的 动画 效果 : 这 些 效果 包括 滑动 、 淡 入 淡出 和 自 定 
义 的 动画 。 


例 10-15 动画 停止 。 


=html> 
=head> 
script src="../jquery/jquery.js"><=/script> 
=style> 


div { 





9--- JavaScript+jQuery Web 交 互 程序 设计 ------------------------------------------------------ 


margin: 10px Opx; 


span { 
position: absolute; 
width: 80px; 
height: 80px; 
border: solid 1px #¢ccc; 
margin: Opx 8px; 
background-color: Red; 
color: White; 
vertical-align: middle 

} 

<=/style> 

=/head> 


一 body 二 
去 h3 二 调用 stop0 〇 方法 执行 动画 停止 二 /h3 二 
=span></span> 
过 input id 一 "btnStop" type 二 "button" value 一 "停止 " /二 
<divid="tip"></div> 


script type= "text/JavaScript"> 
$ (function() { 
$ ("span").animate( { 
left : "十 一 100px" 
}, 3000, function() { 
$ (this) .animate({ 
height : ' 十 一 50px"， 
width : 十 一 50px" 
}, 3000, function() { 
$0"#tip").html(" 动 画 完毕 1"); 
站 
Ds 
$("#btnStop"). bind( "click", function() { 
$ ("span"). stop(); //stop() 方 法 的 功能 是 停止 所 选 元 素 正 在 执行 的 动画 
$$ (0"#tip").html(" 动 画 停 止 1"); 
}); 
})); 
/script> 
=/body> 
=/html> 


在 不 单 击 按钮 不 做 任何 干预 ,结果 会 运行 二 span 二 动画 队列 。 

(1) 将 二 span 之 红色 方块 的 向 右 移动 100px。 

(2) 将 二 span 二 的 高 度 、 宽 度 的 值 各 增加 50px。 

(3) 在 二 span 二 完成 动画 队列 ,同时 在 二 div id 王 "tip" 之 内 书写 HTML 文字 “动画 


运行 效果 如 图 10-5 所 示 。 
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在 这 个 二 span 记 动画 队列 中 的 任何 时 间 , 都 可 以 单 击 按钮 停止 动画 ,二 div id=="tip" 二 
内 书写 HTML 文字 “动画 停止 1”。 显 示 效 果 如 图 10-6 所 示 。 
动画 延 时 delay() 方 法 的 语法 格式 如 下 : 


delay( duration, [queueName]) 

















调用 stop() 方 法 执行 动画 停止 
[停止 | 调用 stop() 方 法 执行 动画 停止 
动画 完毕 ! 区 本 
动画 停止 ! 
图 10-5 ”运行 效果 图 10-6 动画 停止 
这 个 方法 的 功能 是 设置 一 个 延 时 值 来 推迟 后 续 队列 中 动画 的 执行 ,其 中 参数 duration 
为 延 时 的 时 间 值 ,单位 是 毫秒 , 当 超 过 延 时 值 时 ,动画 继续 执行 。 可 选 参数 queueName 表示 


队列 名 称 , 即 动画 队列 。 
例 10-16 动画 延 时 。 


=html> 
=head> 
script src=".. /jquery/jquery.js"><=/script> 
<~style> 
div { 
margin: 10px Opx; 





} 


span { 
position: absolute; 
width: 80px; 
height: 80px; 
border: solid 1px # cee; 
margin: Opx 8px; 
background-color: Red; 
color: White; 
vertical-align: middle 

} 

=/style> 

</head> 


=body> 
二 h3 二 调用 delay() 方 法 延 时 执行 动画 效果 二 /h3 二 
=<span></span> 
< 一 input id 一 "btnStop" type 二 "button” value 一 " 延 时 " /二 
二 div id 一 "tip" 盖 二 /div 二 


二 script type 一 "text/javascript" 一 
$ (function() { 
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$ ("span").animate({ 
left : "十 二 100px" 
}, 3000, function() { 
$ (this) .animate({ 
height : ' 十 一 50px' 
width : ' 二 二 50px’ 
}, 3000, function() { 
$C"#tip").html(" 动 画 完 毕 1"); 
DD; 
DD; 
$("#btnStop").bind("click", function() { 
//delay 是 对 动画 队列 的 延 时 ,而 不 是 实时 生效 的 
$ ("span”"). delay(3000); 
$(" 井 tip").html(" 动 画 延 时 !"); 
}% 
DD); 























</script> 
=/body> 
<=/html> 
还 是 上 面 的 动画 例子 ,调用 delay() 方 法 ,结果 如 图 10-7 所 示 。 
调用 delay () 方 法 延 时 执行 动画 效果 
EE 
(a) 动画 正在 执行 
加 
动画 完毕 ! 
(b) 动画 被 延 时 (0) 超过 延 时 值 后 动画 继续 执行 


图 10-7 动画 延 时 


综合 案例 ,请 扫 一 扫 





课 后 练习 


1. jQuery 实现 先 淡出 再 折 又 收 起 的 动画 效果 。 
2. jQuery 制作 loading 动画 特效 。 


第 11 章 


jQuery 与 AJAX 


学 习 目 标 
了 解 AJAX 的 概念 及 功能 。 
掌握 jQuery 与 AJAX 方法 与 事件 。 


11.1 AJAX 简介 


AJAX 并 不 是 一 种 新 的 编程 语言 ,而 是 一 种 新 的 技术 , 它 可 以 创建 更 好 ,更 快 且 交互 性 
更 强 的 Web 应 用 程序 。 


11.1.1 AJAX 概述 


AJAX 即 Asynchronous JavaScript And XML( 异 步 JavaScript 和 XML) ,是 一 种 创建 
交互 式 网 页 应 用 的 网 页 开发 技术 。AJAX 使 用 JavaScript 在 Web 浏览 器 与 We 服务 器 之 间 
发 送 和 接收 数据 。 通 过 在 后 台 与 服务 器 进行 少量 数据 交换 ,AJAX 可 以 使 网 页 实现 异步 更 
新 。 这 意味 着 可 以 在 不 重新 加 载 整个 网 页 的 情况 下 ,对 网 页 的 某 部 分 进行 更 新 。 而 传统 的 
网 页 (不 使 用 AJAX) 如 果 需 要 更 新 内 容 ,必须 重 载 整个 网 页 页 面 。 

AJAX 基于 JavaScript、XML、HTML、CSS 开放 标准 ,AJAX 应 用 程序 独立 于 浏览 器 和 
平台 。 可 以 说 , 它 是 一 种 跨 平台 跨 浏览 器 的 技术 。 大 多 数 Web 应 用 程序 可 通过 使 用 AJAX 
技术 进行 重 写 ,来 蔡 代 传统 的 HTML 表单 。 


11.1.2 AJAX 原理 和 XmlHttpRequest 对 象 


AJAX 的 原理 简单 来 说 通过 XmlHttpRequest 对 象 来 向 服务 器 发 送 异 步 请 求 ,从 服务 
器 获得 数据 ,然后 用 JavaScript 来 操作 DOM 而 更 新 页 面 。 其 中 最 关键 的 一 步 就 是 从 服务 
器 获得 请 求 数据 。XmlHttpRequest 是 AJAX 的 核心 机 制 , 它 是 在 IE 5 中 首先 引入 的 ,是 一 
种 支持 异步 请 求 的 技术 ,也 就 是 JavaScript 可 以 及 时 向 服务 器 提出 请 求 和 处 理 响 应 ,达到 无 
刷新 的 效果 。 

XmlHttpRequest 对 象 有 以 下 属性 。 

(1) onreadystatechange: 每 次 状态 改变 所 触发 事件 的 事件 处 理 程序 。 

(2) responseText: 从 服务 器 进程 返回 数据 的 字符 串 形式 。 

(3) responseXml: 从 服务 器 进程 返回 的 DOM 兼容 的 文档 数据 。 
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(4) status: 从 服务 器 返回 的 数字 代码 ,比如 常见 的 404( 未 找到 ) 和 200( 已 就 绪 ) 。 

(5) status Text: 伴随 状态 码 的 字符 串 信 息 。 

(6) readyState: 对 象 状 态 值 。 

0( 未 初始 化 ) : 对 象 已 建立 ,但 是 尚未 初始 化 (尚未 调用 open() 方 法 ) 。 

1( 初 始 化 ) : 对 象 已 建立 ,尚未 调用 send() 方 法 。 

2( 发 送 数 据 ) : send() 方 法 已 调用 ,但 是 当前 的 状态 及 http 头 未 知 。 

3( 数 据 传送 中 ) : 已 接收 部 分 数据 ,因为 响应 及 http 头 不 全 ,这 时 通过 responseBody 和 
responseText 获取 部 分 数据 会 出 现 错误 。 

4( 完 成 ): 数据 接收 完毕 ,此 时 可 以 通过 responseXml 和 responseText 获取 完整 的 回应 
数据 。 

但 是 ,由 于 各 浏览 器 之 间 存 在 差异 ,所 以 创建 一 个 XmlHttpRequest 对 象 可 能 需要 不 同 
的 方法 。 这 个 差异 主要 体现 在 IE 和 其 他 浏览 器 之 间 。 

下 面 是 一 个 比较 标准 的 创建 XmlHttpRequest 对 象 的 方法 。 


function CreateXmlHttp() { 
// 非 正 浏览 器 创建 XmlHttpRequest 对 象 
if (window. XmlHttpRequest) { 
xmlhttp=new XmlHttpRequest() ; 
} 
// 正 浏览 器 创建 XmlHttpRequest 对 象 
if (window. ActiveXObject) { 
try { 
xmlhttp 一 new ActiveXObject("Microsoft. XMLHTTP"); 
} 
catch (e) { 
try { 
xmlhttp 一 new ActiveXObject("msxml2. XMLHTTP"); 
} 
catch (ex) { } 
} 
} 
} 
function Ustbwuyi() { 
var data 一 document. getElementByld( "username" ). value; 
CreateXmlHttp(); 
if (!xmlhttp) { 
alert(" 创 建 xmlhttp 对 象 异常 1"); 
return false; 
} 
xmlhttp.open("POST"，url，false) ; 
xmlhttp. onreadystatechange 一 function () { 
if (xmlhttp. readyState= =4) { 
document. getElementByld("user1").innerHTML== "数据 正 在 加 载 ..."; 
if (xmlhttp. status 一 一 200) { 
document. write( xmlhttp. responseText) ; 


} 
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xmlhttp. send(); 

} 

函数 首先 检查 XmlHttpRequest 的 整体 状态 并 且 保 证 它 已 经 完成 (readyStatus 一 4)， 
如 上 所 示 , 即 数据 已 经 发 送 完 毕 。 然 后 根据 服务 器 的 设 定 询问 请 求 状态 ,如 果 一 切 已 经 就 绪 
(Cstatus 一 200) ,那么 就 执行 下 面 需 要 的 操作 。 

对 于 XmlHttpRequest 的 两 个 方法 ,open() 和 send() ,其 中 open() 方 法 指定 以 下 内 容 。 

(1) 向 服务 器 提交 数据 的 类 型 , 即 是 post 还 是 get。 

(2) 请 求 的 URL 地 址 和 传递 的 参数 。 

(3) 传输 方式 ,false 为 同步 ,true 为 异步 。 默 认为 true。 如 果 是 异步 通信 方式 (true)， 
客户 机 就 不 等 待 服务 器 的 响应 ;如 果 是 同步 通信 方式 (false) ,客户 机 就 要 等 到 服务 器 返回 消 
息 后 才 去 执行 其 他 操作 。 需 要 根据 实际 需要 来 指定 同步 方式 ,在 某 些 页 面 中 ,可 能 会 发 出 多 
个 请 求 , 后 一 个 会 覆盖 前 一 个 ,这 时 必须 指定 同步 方式 。 

send() 方 法 用 来 发 送 请 求 。 

知道 了 XmlHttpRequest 的 工作 流程 ,可 以 看 出 ,XmlHttpRequest 是 完全 用 来 向 服务 
器 发 出 一 个 请 求 的 , 它 的 作用 局 限于 此 ,但 它 的 作用 是 整个 AJAX 实现 的 关键 ,因为 AJAX 
无 非 是 两 个 过 程 , 发 出 请 求 和 响应 请 求 ,并 且 它 完全 是 一 种 客户 端的 技术 。 而 
XmlHttpRequest 正 是 处 理 了 服务 器 端 和 客户 端 通信 的 问题 ,所 以 才 会 如 此 的 重要 。 

可 以 把 服务 器 端 看 成 一 个 数据 接口 , 它 返 回 的 是 一 个 纯 文本 流 , 当 然 ,这 个 文本 流 可 以 
是 XML 格式 ,可 以 是 HTML, 可 以 是 JavaScript 代码 ,也 可 以 只 是 一 个 字符 串 。 这 时 ， 
XmlHttpRequest 向 服务 器 端 请 求 这 个 页 面 ,服务 器 端 将 文本 的 结果 写 入 页 面 ,这 和 普通 的 
Web 开发 流程 是 一 样 的 ,不 同 的 是 ,客户 端 在 异步 获取 这 个 结果 后 ,不 是 直接 显示 在 页 面 ， 
而 是 先 由 JavaScript 来 处 理 ,然后 青 显 示 在 页 面 。 


11.1.3 jQuery AJAX 操作 函数 


jQuery 库 拥有 完整 的 AJAX 兼容 套件 。 其 中 的 函数 和 方法 允许 在 不 刷新 浏览 器 的 情 
况 下 从 服务 器 加 载 数 据 。 详 细 函 数 见 表 11-1。 


表 11-1 jQuery AJAX 操作 函数 


























函 数 简 介 
jQuery. ajax() 执行 异步 HTTP (AJAX) 请 求 
.ajaxComplete() 当 AJAX 请 求 完 成 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 
.ajaxError() 当 AJAX 请 求 完成 且 出 现 错误 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 
.ajaxSend() 在 AJAX 请 求 发 送 之 前 显示 一 条 消息 
jQuery. ajaxSetup() | 设置 将 来 的 AJAX 请 求 的 默认 值 
.ajaxStart() 当 首 个 AJAX 请 求 完成 开始 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 
.ajaxStop() 当 所 有 AJAX 请 求 完成 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 
.ajaxSuccess() 当 AJAX 请 求 成 功 完成 时 显示 一 条 消息 
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续 表 
函 数 简 介 
jQuery. get() 使 用 HTTP GET 请 求 从 服务 器 加 载 数据 
jQuery. getJSON() | 使 用 HTTP GET 请 求 从 服务 器 加 载 JSON 编码 数据 
jQuery. getScript() | 使 用 HTTP GET 请 求 从 服务 器 加 载 JavaScript 文件 ,然后 执行 该 文件 
.load() 从 服务 器 加 载 数 据 , 然 后 返回 到 HTML 放 入 匹配 元 素 
jQuery. param() 创建 数组 或 对 象 的 序列 化 表示 ,适合 在 URL 查询 字符 串 或 在 AJAX 请 求 中 使 用 
jQuery. post() 使 用 HTTP POST 请 求 从 服务 器 加 载 数据 
. Serialize() 将 表单 内 容 序列 化 为 字符 串 
. serializeArray() 序列 化 表单 元 素 , 返 回 JSON 数据 结构 数据 


11.2 jQuery 中 的 AJAX 方法 


jQuery 提供 多 个 与 AJAX 有 关 的 方法 。 通 过 jQuery AJAX 方法 ,能 够 使 用 HTTP 
GET 和 HTTP POST 从 远程 服务 器 上 请 求 文本 .HTML、XML 或 JSON, 同 时 能 够 把 这 些 
外 部 数据 直接 载 人 网 页 的 被 选 元 素 中 。 


11.2.1 load() 方 法 


jQuery load() 方法 是 简单 但 强大 的 AJAX 方法 。load() 方法 从 服务 器 加 载 数据 ,并 
把 返回 的 数据 放 入 被 选 元 素 中 。 
语法 格式 如 下 : 


$ (selector). load(url, data, callback) 


url; 必需 ,规定 希望 加 载 的 URL。 

data: 可 选 ,规定 与 请 求 一 同 发 送 的 查询 字符 串 键 / 值 对 集合 。 

callback: 可 选 ,是 load() 方法 完成 后 所 执行 的 函数 名 称 。 

将 下 面 示例 文件 代码 输入 文本 编辑 工具 中 ,保存 文件 名 称 为 “demo_test. txt”, 并 与 例 
11-1 文件 放 在 同一 路 径 下 。 


<=h2> jQuery and AJAX is FUN!!!</h?2> 
<pid="pl">This is some text in a paragraph. </p> 


例 11-1 把 文件 “demo_test. txt” 的 内 容 加 载 到 指定 的 元 素 中 。 


一 !DOCTYPE html> 

=html> 

=head> 

< 一 script src="/jquery/jquery-1.11.1.min.js"> 
</script> 

<~script> 

$ (document). ready(function(){ 
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$("#btn1"). click(function() { 
$ ('# test) .load('demo_test. txt") ; 

}) 
}) 
=/script> 
=/head> 
=body> 
去 h3 id= "test" 一 请 单 击 下 面 的 按钮 ,通过 jQuery AJAX 改变 这 段 文本 .二 /h3 二 
二 button id 二 "btn1" type 一 "button" 过 获得 外 部 的 内 容 二 /button 二 
=/body> 
=/html> 


程序 运行 后 显示 内 容 如 图 11-1 所 示 。 





请 单 击 下 面 的 按钮 ， 通 过 jQuery AJAX 改变 这 段 文本 。 
获得 外 部 的 内 容 
图 11-1 程序 初始 内 容 


单 击 “ 获 得 外 部 的 内 容 ” 按 钮 后 ,显示 如 图 11-2 所 示 内 容 。 外 部 文件 demo_test. txt 中 
的 内 容 蔡 换 了 网 页 中 原来 显示 的 内 容 。 





jQuery and AJAX is FUN!!! 


This is some text in a paragraph. 


获得 外 部 的 内 容 | 





图 11-2 程序 运行 后 的 内 容 


可 选 的 callback 参数 规定 当 load() 方法 完成 后 所 允许 的 回调 函数 。 回 调 函 数 可 以 设 
置 不 同 的 参数 。 

responseTxt: 包含 调用 成 功 时 的 结果 内 容 。 

statusTXT: 包含 调用 的 状态 。 

xhr: 包含 XmlHttpRequest 对 象 。 

下 面 的 程序 会 在 load() 方 法 完成 后 显示 一 个 提示 框 。 如 果 load() 方 法 已 成 功 , 则 显示 
“外 部 内 容 加 载 成 功 !”, 和 否则 显示 错误 消息 。 


$ ("button"). click(function( ){ 
$$"#divl").load("demo_test. txt", function(responseTxt, statusTxt, xhr){ 


if(statusTxt= = "success") 
alert(" 外 部 内 容 加 载 成 功 !"); 
if(statusTxt= = "error") 


alert("Error: "二 +xhr. status+": "+xhr. statusText); 
D); 
})s 
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11.2.2  $.get() 方 法 和 $. post() 方 法 


jQuery get() 和 post() 方 法 用 于 通过 HTTP GET 或 POST 请 求 从 服务 器 请 求 数据 。 
在 客户 端 和 服务 器 端 进行 请 求 -响应 的 常用 方法 是 GET 和 POST。GET 从 指定 的 资源 请 
求 数据 ,POST 向 指定 的 资源 提交 要 处 理 的 数据 。 

get() 方 法 通过 远程 HTTP GET 请 求 载 和 信息。 这 是 一 个 简单 的 GET 请 求 功能 以 取 
代 复 杂 的 $. ajax 。 请 求 成 功 时 可 调用 回调 函数 。 如 果 需 要 在 出 错时 执行 函数 , 则 需要 使 用 
$ . ajax。 


语法 格式 如 下 : 
$ (selector). get(url, data, success(response, status, xhr) ,dataType) 


url: 必需 ,规定 将 请 求 发 送 的 那个 URL。 

data: 可 选 , 规 定 连同 请 求 发 送 到 服务 器 的 数据 。 

success(response,status,xhr); 可 选 , 规 定 当 请 求 成 功 时 运行 的 函数 。 额 外 的 参数 : 
response, 包 含 来 自 请 求 的 结果 数据 ;status, 包 含 请 求 的 状态 ; xhr, 包 含 XmlHttpRequest 
对 象 。 

dataType: 可 选 ,规定 预计 的 服务 器 响应 的 数据 类 型 。 

根据 响应 的 不 同 的 MIME 类 型 ,传递 给 success 回调 函数 的 返回 数据 也 有 所 不 同 , 这 
些 数据 可 以 是 XML root 元 素 、 文 本 字符 串 、JavaScript 文件 或 者 JSON 对 象 。 也 可 向 
success 回调 函数 传递 响应 的 文本 状态 。 

GET 基本 上 用 于 从 服务 器 获得 ( 取 回 ) 数 据 。GET 方法 可 能 返回 缓存 数据 。 

例如 下 面 语句 : 


$ .get("test. php"，{ name: "John", time: "2pm" } ); 
表示 请 求 test. php 网 页 ,传送 name 和 time 这 两 个 参数 ,并 忽略 返回 值 。 下 面 示例 : 


$ .get("test. php", function(data){ 
alert("Data Loaded: " + data); 
}); 


表示 显示 test. php 返回 值 CHTML 或 XML ,取决 于 返回 值 ) 。 
编辑 demo_test. asp 文件 ,包含 “这 是 个 从 asp 文件 中 读 取 的 数据 "内容 ,并 与 例 11-2 文 
件 放 在 同一 路 径 下 。 
例 11-2 ”使 用 $. get() 方 法 。 


二 !DOCTYPE html> 

=html> 

<head> 

script src="/jquery/jquery-1.11.1.min.js"> 
</script> 

<~script> 

$ (document). ready(function() { 
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$ ("button").click(function() 1{ 
$ .get("demo_test", function(data, status){ 
alert(" 数 据 : " 十 data 十 "\n 状态 : " 十 status); 


站 
3 

DD; 

</script> </head> 

=body> 

一 button 二 发 送 一 个 HTTP GET 请 求 并 获取 返回 结果 二 /button 二 

=/body> 

=/html> 

程序 运行 后 ,网 页 中 显示 包含 “发 送 一 个 HTTP GET 请 求 并 获取 返回 结果 ”提示 信息 
的 按钮 。 单 击 后 ,弹出 窗口 ,并 显示 提示 信息 ,如 图 11-3 所 示 。 

POST 方法 通过 HTTP POST 请 求 从 服务 器 载 人 数据 。 不 过 ,POST 方法 不 会 缓存 数 
据 , 并 且 常 用 于 连同 请 求 一 起 发 送 数据 。 

语法 格式 如 下 : 


jQuery. post(url, data, success(data, textStatus, jgXHR), dataType) 


url: 必需 ,规定 将 请 求 发 送 到 哪个 URL。 

data: 可 选 ,规定 连同 请 求 发 送 到 服务 器 的 数据 。 

success(data， textStatus, jqXHR): 可 选 , 参 数 是 请 求 成 功 后 所 执行 的 函数 名 。 
dataType: 可 选 , 规定 预期 的 服务 器 响应 的 数据 类 型 。 默 认 执行 智能 判断 (xml ,json、 


Script 或 html) 。 
例 11-3 使 用 $. post() 连同 请 求 一 起 发 送 数据 。 


$("button") .click(Cfunction(){ 

$ .post("demo_test_post. php", { 
name:"126 邮箱 "， 
url:"http://wwwl26.com" }, 





function( data, status) { 
alert(" 数 据 : \n" 十 data 十 "\n 状态 : " 十 status); 

)); 

})); 


在 网 页 上 编辑 运行 后 ,显示 如 图 11-4 所 示 的 内 容 。 






































数据 : 
网 站 名 : 126 邮 箱 
数据 : 这 是 个 从 as P 文 件 中 读 取 的 数据 。 URL 地 址 : http://www126.com 
状态 : success 状态 : success 
确定 确定 
图 11-3 提示 信息 图 11-4 测试 post 结果 


其 中 ,demo_test_post. php 文件 实现 了 串联 文字 信息 的 作用 ,代码 如 下 : 


一 ?php 
$ name 一 isset($_POST[name]) ? htmlspecialchars($_POST[name]) : "; 
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$ url=isset( $ _POST['url]) ? htmlspecialchars( $ _POST['url]) : "; 
echo 网 站 名 : ' . 

$ name; echo "\n"; 

echo 'URL 地 址 :'. 

$ url; 

?> 


11.2.3 ”$.getScript() 方 法 和 $. getJSON() 方 法 


getScript() 方法 通过 HTTP GET 请 求 载 人 并 执行 JavaScript 文件 。 
语法 格式 如 下 : 


$ (selector). getScript(url, success( response, status)) 


url: 必需 ,规定 将 请 求 发 送 到 哪个 URL。 

success(response, status):; 可 选 ， 规定 请 求 成 功 后 执行 的 回调 函数 。 额 外 的 参数 ， 
response, 包 含 来 自 请 求 的 结果 数据 ; status, 包 含 请 求 的 状态 (success,notmodified, error， 
timeout 或 parsererror) 。 


下 面 语 句 表 示 通 过 AJAX 请 求 来 获得 并 运行 一 个 JavaScript 文件 。 


$ ("button"). click(function( ){ 
$ .getScript("demo_ajax_script.js"); 
DD); 
getJSON() 方法 通过 HTTP GET 请 求 载 入 JSON 数据 。 
语法 格式 如 下 : 


jQuery. getJSON (url, data, success( data, status, xhr)) 

url: 必需 ,规定 将 请 求 发 送 到 哪个 URL。 

data: 可 选 ,规定 连同 请 求 发 送 到 服务 器 的 数据 。 

success(data,status, xhr): 可 选 , 规定 当 请 求 成 功 时 运行 的 函数 。 额 外 的 参数 : data， 
包含 来 自 请 求 的 结果 数据 ;xhr, 包 含 XmlHttpRequest 对 象 ;status, 包 含 请 求 的 状态 。 


11.2.4， 忆 :ajaxO 方 法 


ajax() 方 法 通过 HTTP 请 求 加 载 远 程 数 据 。 该 方法 是 jQuery 底层 AJAX 实现 。 
$ .ajax() 返 回 其 创建 的 XmlHttpRequest 对 象 。 大 多 数 情 况 下 无 须 直接 操作 该 函数 。 最 
简单 的 情况 下 , $ . ajax() 方 法 可 以 不 带 任何 参数 直接 使 用 。 

语法 格式 如 下 : 


jQuery. ajax( [settings]) 


可 选 参数 settings 用 于 配置 AJAX 请 求 的 集合 ({name: value，name: value,...)) 。 可 
以 通过 $. ajaxSetup() 设置 任何 选项 的 默认 值 。 
$ .ajax() 函 数 依赖 服务 器 提供 的 信息 来 处 理 返 回 的 数据 。 如 果 服 务 器 报告 返回 的 数 
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据 是 XML ,那么 返回 的 结果 就 可 以 用 普通 的 XML 方法 或 者 jQuery 的 选择 器 来 遍历 。 如 
果 是 其 他 类 型 ,比如 HTML, 则 数据 就 以 文本 形式 来 对 待 。JSONP 是 JSON 格式 的 扩展 。 
它 要 求 一 些 服务 器 端的 代码 来 检测 并 处 理 查 询 字 符 串 参数 。 
编写 测试 文件 “testl. txt”, 内 容 如 下 ,并 与 例 11-4 文件 存放 在 相同 路 径 。 
一 p>AJAX 是 一 个 很 棒 的 功能 . </p> 


一 p>Itis just a technique for creating better and more interactive web applications. </p> 


例 11-4 ajax() 方 法 。 





=html> 
<head> 
一 script type= "text/javascript" src="/jquery/jquery.js"></script> 





一 script type= "text/javascript" > 
$ (document). ready(function() { 
$C"#b01"). click(function() { 
htmlobj= $ ,ajax( (url:"test]. txt", async:false) ); 
$("#myDiv").html(htmlobj. responseText) ; 
) 
5 
=/script> 
</head> 
=body> 
二 div id 一 "myDiv" 二 一 h2 二 通过 AJAX 改变 文本 二 /h2 二 /div 二 
一 button id 二 "b01" type 一 "button" 过 改变 内 容 二 /button 二 
=/body> 
=/html> 


通过 单 击 网 页 上 的 “改变 内 容 " 按 钮 ,可 以 将 网 页 内 原 有 的 内 容 “ 通 过 AJAX 改变 文本 ” 
修改 为 “AJAX 是 一 个 很 棒 的 功能 。It is just a technique for creating better and more 


» 


interactive web applications. ”。 


11.3 jQuery 中 的 AJAX 事件 


事件 处 理 程序 指 的 是 当 HTML 中 发 生 某 些 事 件 时 所 调用 的 方法 。 通 常会 把 jQuery 
代码 放 到 二 head 二 部 分 的 事件 处 理 方法 中 。AJAX 会 触发 很 多 事件 。 通 常 可 以 划分 为 两 
种 事件 。 一 种 是 局 部 事件 ;一 种 是 全 局 事件 。 局 部 事件 : 通过 $ . ajax 来 调用 并 且 分 配 。 





$ .ajax({ 
beforeSend: function(){ 
// Handle the beforeSend event 
}, 
complete: function(){ 
// Handle the complete event 
} 
Ness 
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全 局 事件 ,可 以 用 bind 来 绑 定 , 用 unbind 来 取消 绑 定 。 与 click/mousedown/keyup 等 
事件 类 似 , 但 它 可 以 传递 到 每 一 个 DOM 元 素 上 。 


$ ("#1o0ading"). bind("ajaxSend", function(){ // 使 用 bind 
$ (this). show(); 

}).ajaxComplete(function(){ // 直 接 使 用 ajaxComplete 
$ (this). hide(); 

DD; 


当然 ,如 果 某 一 个 AJAX 请 求 不 希望 产生 全 局 的 事件 , 则 可 以 设置 global:false。 


$ .ajax({ 

url: "test. html", 
global: false, 
fiss 

)); 


事件 顺序 与 功能 如 表 11-2 所 示 。 
表 11-2 jQuery AJAX 事件 
事 件 功 能 
ajaxStart 全 局 事件 开始 新 的 AJAX 请 求 ,并且 此 时 没有 其 他 AJAX 请 求 正 在 进行 
beforeSend 局 部 事件 当 一 个 AJAX 请 求 开始 时 触发 。 如 果 需 要 ,可 以 在 这 里 设置 XHR 对 象 
ajaxSend 全 局 事件 请 求 开 始 前 触发 的 全 局 事件 




















success 局 部 事件 请 求 成 功 时 触发 。 即 服务 器 没有 返回 错误 ,返回 的 数据 也 没有 错误 
ajaxSuccess 全 局 事件 全 局 的 请 求 成 功 
error 局 部 事件 仅 当 发 生 错 误 时 触发 。 无 法 同时 执行 success() 和 error() 两 个 回调 函数 





ajaxError 全 局 事件 全 局 发 生 错误 时 触发 

complete 局 部 事件 不 管 请 求 成 功 还 是 失败 ,即便 是 同步 请 求 , 也 都 能 在 请 求 完成 时 触发 这 个 事件 
ajaxComplet 全 局 事件 全 局 的 请 求 完成 时 触发 

ajaxStop 全 局 事件 当 没 有 AJAX 正在 进行 时 触发 














全 局 事件 中 ,除了 ajaxStart 和 ajaxStop 之 外 ,其 他 的 事件 都 有 3 个 参数 ，event、 
XmlHttpRequest、ajaxOptions。 第 一 个 是 事件 ,第 二 个 是 XHR 对 象 ,第 三 个 是 当时 调用 这 
个 AJAX 时 的 参数 。 对 于 ajaxError, 还 有 第 四 个 参数 thrownError, 只 有 当 异 常 发 生 时 才 
会 被 传递 。 

可 以 利用 各 种 事件 进行 参数 的 传递 。 例 如 下 面 一 段 程序 ,通过 AJAX 调用 来 实现 自 定 
义 参 数 的 传递 。 


// 自 定义 参数 messg 

$ .ajax({url:"testl. html", type:"get", messg:" 页 面 一 ")); 
$ .ajax({url:"test2.html", type:"get", messg:" 页 面 二 ")); 
$ .ajax({url:"test3.html", type:"get", messg:" 页 面 三 ")); 
$ .ajax( {url: "test4.html", type: "get", messg:" 页 面 四 ")); 


上 面 这 段 程序 .可 以 获取 到 自 定义 参数 messg 的 内 容 , 但 对 于 不 同 的 AJAX 请 求 ,还 无 
法 判断 ,下 面 对 程序 进行 改写 ,以 实现 区 别 对 待 不 同 的 AJAX 请 求 。 
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$ ("#messg").beforeSend(function(e, xhr,o) { 
$ (this) .html(" 正 在 请 求 " 十 o. messg); 
)).ajaxSuccess(function(e, xhr,o) { 
$ (this) .html(o. messg 十 "请 求 成 功 "); 
)) .ajaxError(function(e, xhr,o) { 
$ (this) .html(o.messg 十 "请 求 失败 "); 
Ds 





回 
综合 案例 ,请 扫 一 扫 党 
回 





课 后 练习 
1. 编写 一 个 网 页 ,如 图 11-5 所 示 , 单 击 * 导 入 ?按钮 后 ,将 外 部 提交 的 基本 个 人 信息 (11 
课 后 练习 1 辅助 文件 ?替换 掉 网 页 中 初始 信息 内 容 , 如 图 11-6 所 示 。 





请 导入 客户 个 人 信息 。 


图 11-5 练习 1 页 面 起 始 内 容 图 11-6 练习 1 页 面 导 和 内容 


2. 制作 网 页 1 ,包含 练习 1 中 辅助 文件 内 容 ;制作 网 页 2, 包 含 相应 提示 按钮 ,实现 单 击 
按钮 ,将 网 页 1 中 信息 导入 网 页 2 中 。 
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jQuery 插件 的 开发 与 使 用 


学 习 目 标 
掌握 jQuery 的 插件 开发 。 
熟练 使 用 jQuery 的 插件 开发 程序 。 


12.1 jQuery 插件 


1. 插件 的 概念 


jQuery 提供 一 个 强大 的 基础 功能 包 , 里 面包 含 许多 基础 功能 。jQuery 插件 是 以 jQuery 
为 基础 开发 的 功能 更 为 完善 .更 易于 直接 使 用 的 功能 包 , 即 jQuery 插件 是 对 jQuery 库 的 拓 
展 ,插件 里 面 是 开发 人 员 要 实现 的 个 性 化 的 效果 。 

为 了 便于 理解 ,可 以 把 jQuery 比喻 为 各 种 尺寸 的 木 条 、 木 板 。jQuery 插件 是 用 这 些 木 
条 木板 做 成 的 各 种 桌子 .椅子 、. 床 。 

而 制作 网 页 时 , 则 可 以 用 jQuery 插件 ,也 就 是 这 些 桌 子 ,椅子 、 床 ,通过 组 合 摆 放 实现 家 
居 整 体 设计 方案 。 

jQuery 提供 选择 器 (就 是 $("#domid") 之 类 ) 效果 (就 是 animate) 等 基础 功能 。 

jQuery 插件 如 slidesjs, 则 用 上 面 的 功能 实现 图 片 轮 播 效果 。 这 个 插件 只 有 这 一 个 图 片 
轮 播 效果 功能 。 

制作 网 页 时 , 则 可 以 直接 使 用 这 个 插件 slidesjs, 不 用 自己 青 写 功能 定义 代码 。 只 需 使 
用 这 个 插件 的 调用 与 设置 (也 就 是 上 面 说 的 组 合 摆 放 ) 就 可 以 在 网 页 中 实现 广告 图 片 切换 轮 
播 效果 了 。 

一 般 情况 下 jQuery 插件 只 实现 一 个 功能 且 可 以 直接 使 用 。 少 数 jQuery 插件 实现 多 个 
功能 。 


2. jQuery 插件 的 种 类 


插件 一 般 分 为 3 类 。 

(1) 对 象 级 别 的 插件 , 即 给 jQuery 对 象 添 加 方法 ,封装 对 象 方法 的 插件 ,如 parent()、 
appendTo() 。 

(2) 类 级 别 的 插件 , 即 给 jQuery 添加 新 的 全 局 函数 ,相当 于 给 jQuery 类 本 身 添 加 方 
法 ,jQuery 的 全 局 函数 就 是 属于 jQuery 命名 空间 的 函数 ,封装 全 局 函数 的 插件 。 

(3) 选择 器 插件 ,这 种 插件 开发 时 很 少 使 用 ,各 类 自 定义 的 插件 多 数 属于 前 面 两 种 。 





12.2 常用 jQuery 插件 


jQuery 插件 太 多 了 ,只 有 自己 用 到 的 时 候 才 知道 该 用 什么 ,平时 常用 的 有 分 页 插件 、 轮 


播 图 插件 、 移 动 端 时 间 和 日 期 选择 插件 等 。 在 此 列举 两 种 常用 插件 。 


1. 轮 播 图 插件 
轮 播 图 片 功能 在 当前 的 网 站 上 使 用 得 特别 多 。unslider 是 一 个 很 好 用 的 幻灯 片 插件 ， 


是 一 款 非常 轻 量 的 jQuery 插件 ,能 够 用 于 任何 HTML 内 容 的 滑动 。 可 以 响应 容器 的 大 小 
变化 ,自动 排 布 不 同 大 小 的 滑 块 。 引 入 unslider. min. js 就 可 直接 使 用 。 


例 12-1 显示 轮 播 5 张 世 界 不 同城 市 的 标志 图 片 。 


二 ! 一 首先 引入 jQuery 和 unslider 一 二 
< 一 script src= "jquery/jquery.js"><=/script> 
script src= "jquery/unslider. min.js"><=/script> 





二 ! 一 写 点 样式 ,让 轮 播 好 看 点 一 
=style> 
ul, ol { padding: 0;} 
. banner { position: relative; overflow: auto; text-align: center;} 
.banner li { list-style: none; } 
.banner ul li { float: left; } 
#b04 { width: 640px;} 
#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;} 
#b04 .dots li 
{ 
display: inline-block; 
width: 10px; 
height: 10px; 
margin: 0 4px; 
text-indent: -999em; 
border: 2px solid # fff; 
border-radius: 6px; 
cursor: pointer; 
‘opacity: .4; 
-webkit-transition: background .5s, opacity .5s; 
-moz-transition: background .5s, opacity .5s; 
transition: background .5s, opacity .5s; 
} 
#b04 .dots li.active 
{ 
background: #fff; 
‘opacity: 1; 
} 
#3b04 .arrow { position: absolute; top: 200px;} 
#b04 #al { left: 15px;} 
井 b04 #ar { right: 15px;} 
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=/style> 


<body> 
二 ! 一 把 要 轮 播 的 地 方 写 上 来 一 二 
=div class="banner" id 二 ="b04"> 
<u> 
一 1i 一 一 img src="../img/01.jpg" 
< 一 1i 盖 一 img src 一 ". ./img/02.jpg" 
<l><img src="../img/03.jpg" 
<li><img src .Vimg/04.jpg" 
< 一 1i 盖 一 img src="../img/05.jpg" alt="" 
</ul> 
=a href="JavaScript: void(0);" class= "unslider-arrow04 prev" 二 一 img class="arrow" id 一 
../img/arrowl. png" alt= "prev" width="20" height="35"></a> 





width= "640" height 
width= "640" height= 
width= "640" height 
width= "640" height 
width= "640" height 


"480" ></li> 
"480" </li> 
"480" ></li> 
80" ></li> 
"480" ></li> 




























"al” sic= 
avascript: void (0);" class= "unslider-arrow04 next"><img class="arrow" id 一 


../img/arrowr. png" alt="next" width="20" height="37"></a> 


=/body> 


二 ! 一 最 后 用 JavaScript 控制 一 全 
=script> 
$ (document). ready(function(e) { 
var unslider04= $ ('# b04"). unslider( { 
dots: true 
jj 
data04 一 unslider04.dataCunslider) ; 


$ (0'. unslider-arrow04" .click(function() { 
var fn= this. className. split(' )[1]; 
data04[fn](); 
DD); 
DD; 
=/script> 


运行 结果 如 图 12-1 所 示 。 





图 12-1 图 片 轮 播 


参数 如 表 12-1 所 示 。 























表 12-1 参数 
参 数 说 明 
speed 图 片 切换 的 速度 ,数字 ,单位 为 毫秒 
delay 图 片 停留 的 时 间 ,数字 :单位 为 毫秒 
complete 每 次 图 片 切换 完 后 的 回调 函数 ,function() {} 
keys 是 否 支 持 键盘 控制 , 取 值 为 true/false 
dots 是 否 显 示 指 示 器 , 取 值 为 true/false 
fluid 是 否 支 持 响应 式 布局 , 取 值 为 true/false 
例如 : 


$ ('. banner) . unslider( ( 
speed: 500， 
delay: 3000， 
complete: function() 
keys: true, 
dots: true， 
fluid: false 


// 滚 动 速度 
// 动 画 延 迟 

// 动 画 完成 的 回调 函数 
// 启 动 键盘 导航 

// 显 示 点 导航 

// 支 持 响应 式 设计 


{}, 


)y; 
2. 手风琴 折 琶 菜单 插件 
例 12-2 手风琴 折 生 菜单 的 应 用 。 
=html> 
<head> 
script src= "jquery/jquery.js"><=/script> 
=style> 
=style> 
body! 
margin:0; 
padding:0; 


background:url(img/bgl.jpg) #400B4F no-repeat; 


.container{ 
width:700px; 
height:500px; 


margin:70px auto; 


.handle{ 
float: left; 
margin:0 2px; 
width:50px; 
height:500px; 
cursor: pointer; 
background: # FOF:; 
font: bold 24px Arial 


， Helvetica, sans-serif; 
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text-align: center; 

color: # FFF; 
-~webkit-border-radius:25px; 
-moz-border-radius:25px; 
-or-border-radius:25px; 
border-radius:25px; 
-webkit-transition:0. 3s ease-in-out; 
-moz-transition:0.3s ease-in-out; 
-ortransition:0.3s ease-in-out; 


-ms-transition:0. 3s ease-in-out; 


. handle: hover! 
background: # FC3; 
-webkit-transform: scale(1.02); 
-moz-transform: scale(1.02); 
-ms-transform: scale(1.02); 
-o-transform: scale(1.02); 


.select{ 
background: # FC3; 


.slide{ 
background: url(../img/black. jpg); 
float: left; 
width:220px; 
height:500px; 
display: none; 
margin:0 4px; 
-webkit-border-radius:25px; 
-moz-border-radius:25px; 
-0-border-radius:25px; 
border-radius:25px; 


img!{ 
background: # FFF; 
display: block:; 
width:180px; 
height:440px; 
margin:20px auto; 
padding: 5px; 


.rotatel 
margin:50px auto; 
-webkit-transform: rotate( 90deg) ; 
-moz-transform: rotate( 90deg); 


-ms-transform: rotate( 90deg) ; 
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-0-transform: rotate( 90deg) ; 
} 
=/style> 
一 script type= "text/javascript"> 
$ (document) . ready(function() { 

var j=1; 


$ (".handle").each(function( ){ 
if( $ .browser. msie®&. &.( $ .browser. version 一 一 "8.0")) 


{ 
$ (this). children("p"). html()); 
和 
} 
else{ 
var i= $ (this). attr("id"); 
$ (this) .children("p").html(iD ; 
} 


}) 


$ (".handle" .clickCfunction(C){ 
if(! $ (this).siblings(".slide").isC":visible")){ 
$ (this).addClass( "select"); 
$ (this). siblings(". slide").animate( {width:"show"),180); 
$ (this). parent(). siblings(). children( ". slide").animate( {width:"hide"} ,180); 
$ (this). parent(). siblings(). children(". handle"). removeClass( "select"); 

















} 
elsef 
$ (this) .siblings(".slide").animate({width:"hide"} ,180); 
$ (this). removeClass( "select"); 
} 
}) 
}) 
=/script> 
=</head> 
=body> 
二 div class= "container"> 
<div> 
<div class= "handle" id="spring"><p class= "rotate"></p></div> 
二 div class= "slide"><img src="../img/spring.jpg" /二 二 /div 二 
</div> 
<div> 
div class= "handle" id= "summer"><p class= "rotate"></p></div> 
div class= "slide"><img src="../img/summer.jpg" /二 一 /div 二 
</div> 
<div> 
一 div class= "handle" id= "autumn"><p class= "rotate"></p></div> 
所 div class= "slide"><img src="../img/autumn.jpg" /></div> 


</div> 
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=div> 
div class= "handle" id="winter"><p class= "rotate"></p></div> 
<div class= "slide"><img src="../img/winter.jpg" /></div> 
</div> 
</div> 
</body> 
=/html> 


上 面 例子 设 定 春 , 夏 、 秋 、 冬 四 季 的 4 张 照片 , 单 击 菜单 条 目 , 对 应 的 季节 图 片 就 像 手 风 
琴 一 样 能 拉 开 或 者 合 上 ,效果 如 图 12-2 所 示 。 





Buuds 


EC 到 





图 12-2 手风琴 折 释 菜单 


12.3 开发 自己 的 插件 


jQuery 为 开发 插件 提供 了 两 个 方法 : 封装 方法 插件 和 封闭 函数 插件 。 语 法 格式 如 下 : 


jQuery. fn. extend(object); // 给 jQuery 类 添加 方法 . 
jQuery. extend(object) ; /* 为 扩展 jQuery 类 本 身 ,为 类 添加 新 的 方法 ,可 以 理解 为 添加 静态 方法 x*/ 


这 两 个 方法 都 接收 一 个 参数 ,类 型 为 object,object 对 应 的 “名 / 值 对 ”分 别 代表 函数 或 
方法 体 /函数 主体 。 

1. 编写 jQuery 插件 

封装 jQuery 方法 的 插件 ,首先 需要 在 JavaScript 文件 里 搭 好 框架 ,代码 如 下 : 


一 span style= "font-size:12px; "> ; (function( $ ){ 
// 这 里 写 插 件 代码 
)) GQuery);=/span> 


2. 对 象 级 别 的 插件 开发 


即 给 jQuery 对 象 添加 方法 ,封装 对 象 方法 的 插件 ,如 parent() .appendTo() 。 
由 于 是 对 jQuery 对 象 的 方法 扩展 ,因此 采用 扩展 类 (封装 对 象 方法 ) 插 件 的 方法 
jQuery. fn. extend() 来 编写 。 
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fn 是 什么 呢 ? 原来 jQuery. fn 二 jQuery. prototype。 读 者 对 prototype 肯定 不 会 陌生 。 
虽然 JavaScript 没有 明确 的 类 的 概念 ,但 是 用 类 来 理解 它 会 更 方便 。jQuery 便 是 一 个 封装 
得 非常 好 的 类 ,比如 用 语句 $ ("#btnl") 可 以 生成 一 个 jQuery 类 的 实例 。 

jQuery. fn. extend(object) 对 jQuery. prototype 进行 扩展 ,就 是 为 jQuery 类 添加 “成 员 
函数 ”"。jQuery 类 的 实例 可 以 使 用 这 个 “成 员 函 数 ”, 即 $ ("#id"). object() 。 


一 span style= "font-size:12px;"> ; (function( $ ){ 
$ .fn.extend({ 
"color" :function( value) { 
// 这 里 写 插件 代码 
} 
)); 
DD iQuery);</span> 


或 


=span style= "font-size:12px;"> ; (function( $ ){ 
$ ,fn. color=function(value) { 
// 这 里 写 插件 代码 
} 
})) GQuery) ;=</span> 


这 里 的 方法 提供 一 个 参数 value, 如 果 调 用 方法 时 传人 value, 那 么 就 用 这 个 值 来 设置 字 
体 颜 色 ,否则 就 是 获取 匹配 元 素 的 字体 颜色 的 值 。 用 jQuery. fn. extend( ) 方 法 来 编写 代码 ， 
如 下 所 示 : 
< 一 span style= "font-size:12px; "> ; (function( $ ){ 
$ .fn.extend( { 
"color" :function( value) { 
return this. css("color", value); 
} 
}); 
})) GQuery);=/span> 
插件 内 部 的 this 指向 的 是 jQuery 对 象 ,而 非 普通 的 DOM 对 象 。 捅 件 如 果 不 需 要 返回 
字符 串 之 类 的 特定 值 , 应 当 使 其 具有 可 链接 性 。 
为 此 ,直接 返回 这 个 this 指向 的 对 象 , 由 于 css() 方 法 也 会 返回 调用 它 的 对 象 , 即 此 外 
的 this, 因 此 可 以 将 代码 写成 下 面 的 形式 : 





; (functionC $ ){ 
$ .fn.extend({ 
"color": function(value){ 
return this. css("color", value); 
} 
7 
)) GQuery); 


调用 时 可 直接 写成 : 


$ ("div"). color("red"); 
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另外 如 果 要 定义 一 组 插件 ,可 以 使 用 如 下 所 示 写 法 : 


一 span style= "font-size:12px;"> ; (function( $ ){ 
$ .fn.extend( { 
"color" :function( value) { 
// 这 里 写 插件 代码 
和 
"border" :function(value){ 
// 这 里 写 插件 代码 
入 
"background" :function(Cvalue){ 
// 这 里 写 插件 代码 
} 
DD; 
})) GQuery);=/span> 


比如 要 开发 一 个 插件 ,做 一 个 特殊 的 编辑 框 , 当 它 被 单 击 时 , 便 提示 当前 编辑 框 里 的 内 
容 。 代 码 如 下 : 


$ .fn.extend( { 
alertWhileClick: function( ){ 
$ (this) .click(function( ) { 
alert( $ (this). val( )); 
DD; 
} 
}); 
$ ("#inputl").alertWhileClick(); /*#* 页 面 上 为 :“ 一 input id 二 "inputl" type 一 "text"/ 二”* / 
$$ ("#inputl") 为 一 个 jQuery 实例 , 当 它 调用 成 员 方法 alertWhileClick 后 , 便 实现 了 
扩展 ,每 次 被 单 击 时 它 会 先 弹出 目前 编辑 里 的 内 容 。 


3. 封装 全 局 函数 的 插件 


这 类 插件 是 在 jQuery 命名 空间 内 部 添加 一 个 函数 。 这 类 插件 很 简单 ,只 是 普通 的 函 
数 , 没 有 特别 需要 注意 的 地 方 。 典 型 的 例子 就 是 $.AJAX(), 将 函数 定义 于 jQuery 的 命名 
空间 中 。 

为 jQuery 类 添加 类 方法 ,可 以 理解 为 添加 静态 方法 。 例 如 : 

$ .extend( { 

add:function(a, b) {return a 十 b;} 

DD; 
便 为 jQuery 类 添加 一 个 名 为 add 的 “静态 方法 ”, 之 后 便 可 以 在 引入 jQuery 的 地 方 使 用 这 
个 方法 了 : 


$ .add(3,4); //return 7 


jQuery. extend() 方 法 除了 可 以 扩展 jQuery 对 象 外 ,还 可 以 扩展 已 有 的 object 对 象 ,经 
常 被 用 于 设置 插件 方法 的 一 系列 默认 参数 ,可 以 很 方便 地 用 传人 的 参数 来 覆盖 默认 值 。 
例如 : 
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jQuery.extend(Cobjectl,object2) /x* objectl 为 默认 参数 值 ,object2 为 传人 的 参数 值 * / 


下 面 例子 新 增 两 个 函数 ,用 于 去 除 字符 串 左 侧 和 右 侧 的 空格 。 

首先 构建 一 个 object 对 象 , 把 函数 名 和 函数 都 放 进 去 ,其 中 的 名 / 值 对 分 别 为 函数 名 和 
函数 主体 ,然后 利用 jQuery. extend() 方 法 直接 对 jQuery 对 象 进行 扩展 。 

jQuery 代码 如 下 : 


一 span style= "font-size:12px;"> ; (function( $ ){ 
$ .extend({ 
ltrim: function( text) { 
return (text||""). replace(/~\s+g,""); 
bs 
rtrim:function( text) { 
return (text||""). replace(/\s+ $ /g,""); 
} 
DD; 
}) jQuery); 


或 


一 span style= "font-size:12px; "> ; (function( $ ){ 
$ .ltrim= function( text) { 
return (text||""). replace(/\s+g,""); 
}, 
$ .rtrim= function( text) { 
return (text| |""). replace(/\s+ $ /g,""); 
} 


})) (Query);=/span> 


x* (text|1"") 部 分 是 用 于 防止 传递 进来 的 text 这 个 字符 串 变量 处 于 未 定义 的 特殊 状 
态 , 如 果 text 是 undeined, 则 返回 字符 串 "" ,和 否则 返回 字符 串 text。 这 样 处 理 是 为 了 保证 接 
下 来 的 字符 串 替换 方法 replace() 不 会 出 错 ,* 运用 了 正则 表达 式 蔡 换 首 末 的 空 

现在 调用 函数 : 

一 span style= "font-size:12px;"> $ ("trimTest"). val( 

jQuery. trim(" test ") 十 "\n" 十 
jQuery. ltrim(" test ") 十 "\n" 十 
jQuery. rtrim(" test ") 

);=/span> 

运行 代码 后 ,文本 框 中 第 一 行 字符 串 左右 两 侧 的 空格 都 被 删除 ,第 二 行 的 字符 串 只 有 左 
侧 的 空格 被 删除 ,第 三 行 的 字符 串 只 有 右 侧 的 空格 被 删除 。 


课 后 练习 


1. 上 网 搜索 jQuery 拖 忠 排序 布局 插件 的 方法 并 进行 应 用 。 
2. 上 网 搜索 jQuery 左右 箭头 控制 文字 列表 切换 特效 的 方法 并 进行 应 用 。 
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